Hiding number field control buttons

Dash Python
1

Hi everyone, is it possible to hide the increment buttons that I see in my app for every dcc.Input(‘type’ = ‘number’)? See image. I couldn’t figure out the setting. Thanks a lot in advance!temp

2

I don’t know if the dcc.Input component has this option, but have you tried doing in with CSS?
Some example here: https://stackoverflow.com/questions/3790935/can-i-hide-the-html5-number-input-s-spin-box

3

Thanks Jordan,

that was indeed the right direction, thanks a lot!
One can set ‘appearance’ to ‘textfield’ for textarea in order to turn those spinners off.

1 Like
4

Hey there,

If you don’t specify a type (or specify textfield) then yeah, there won’t be any spinners. Then you can control user inputs in the callback through a form validation process.

The way I currently handle form validation is as follows:

  • I have several inputs, a submit button, a ‘hidden div’, an ‘error div’
  • The submit button triggers a callback that takes all the inputs as STATE and the hidden div as OUTPUT. In this function we control every single field based on what we expect. If ONE of them is wrong, “status” will be “ko”. We’ll then add a “message” list that contains all of the error messages. The output is a dict with “status” and “messages” (transformed into json)
  • The hidden div change triggers a callback with hidden div children as INPUT and error div as OUTPUT: if “status” is “ok” then we do a bunch of things (like insert a bunch of things), and if “status” is “ko” then we do nothing because the form is not ok. FInally we return the “messages” to the error div. “message” will either contain “it’s all good” or the list of error messages gotten from the form validation
  • You can also add callbacks to change input field design based on the error your return, etc.

It’s like doing ajax form validation but through Dash