NumberInput

NumberInput is a utility part of Slider

Install

yarn add @ntds/slider

Import

import { Slider } from '@ntds/slider';

Props

NumberInput

Prop	Type & 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.
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 Default value: "0" Set to -1 if numberInput should be taken out of tab order.
tw	TwGroupKeys Tailwind overrides