Top
NumericInput - Styling & Theming
NumericInput
To style and customize the appearance of <NumericInput />, you can use one of the following strategies:
  • Specify a style prop with the desired values.
  • Specify a <NumericInput /> className - note that this will not override the default <NumericInput /> class of zippy-react-toolkit-numeric-input, but rather will be appended to the classes that the component already has.
Below you can find a list with all the css classes applied to numeric inputs and when/how they are applied.
ClassNameDescription
zippy-react-toolkit-numeric-input
This is the block className for all numeric inputs. Always applied.
zippy-react-toolkit-numeric-input__spinner-arrow
Added on spinner tools.
zippy-react-toolkit-numeric-input__clear-button
Added on clear button.
zippy-react-toolkit-numeric-input__spinner-arrow--active
Added on spinner tool when are active.
zippy-react-toolkit-numeric-input__spinner-arrow--up
Added on up spinner tool.
zippy-react-toolkit-numeric-input__spinner-arrow--down
zippy-react-toolkit-numeric-input__wrapper
When enableSpinnerTools=true a wrapper is used to hold the input and arrows.
Applied on this wrapper.
zippy-react-toolkit-numeric-input--tool-position-start
Applied on wrapper when toolPosition=start.
zippy-react-toolkit-numeric-input--tool-position-end
Applied on wrapper when toolPosition=end.
zippy-react-toolkit-numeric-input__spinner-wrapper
Applied on spiner tools wrapper.
zippy-react-toolkit-numeric-input__clear-button-wrapper
Applied on clear button wrapper.
zippy-react-toolkit-numeric-input__number-input
Applied on input when enableSpinnerTools=true. It is added because in this case input is rendered inside a div toggether with spinner tools.