NumberInput
NumberInput is a utility part of Slider
Install
yarn add @ntds/sliderImport
import { Slider } from '@ntds/slider';Props
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | — | The name of the input. Mainly used to make the internal id of the component unique |
value | number | — | Used together with `onChange` to control the input-component like a [controlled component](https://reactjs.org/docs/forms.html#controlled-components). |
min | number | — | Minimum number value possible to input. |
max | number | — | Maximum number value possible to input. |
step | number | — | Step value for arrow up/down usage. Default sett to 1. In addition, 'home' or the 'end' keys set the minimum or maximum value. |
onChange | (nextValue: number) => void | — | Called for every value change. Typically for updating the value externally. **Important!** The NumberInput will return NaN on ALL invalid input (empty values, too big/small values and letters). If the value becomes invalid, the component will display an error message that you provide via the `errorMessage`-prop. Use `Number.isNaN(value)` to check if the input is valid. |
label? | string | ((info: InfoProps) => string) | — | Label for the (actual) number input. |
ariaValueText? | (value: number) => string | — | Provide a more semantic read-out when the value change for screen readers For example: "1 uke", "2 uker" or "4 kuponger" |
errorMessage? | (info: InfoProps) => string | — | If the user provides a invalid, too big/small or empty value, an inline error message will be shown under input. Provide a contextual message with the correct range (use the `info`-object to get the `min`, `max` values, for example) |
showFocusMessage? | boolean | — | To turn on focus message. |
valueLabel? | string | — | Label for the (actual) number input. |
fontSizeClass? | string | — | FontSize class to override default. |
tabIndex? | number | 0 | Set to -1 if numberInput should be taken out of tab order. |
tw? | TwGroupKeys | — | Tailwind overrides |