Number picker

<NumberPicker
	value={data}
	onChange={(value) => setValue(value)}
/>

Tip

When focused inside the input field, use the up/down arrows to change the value.

Highlighted props

For the complete list of props, use your IDE's autocomplete functionality.

Min, max, step

<NumberPicker
	value={value}
	onChange={(value) => setValue(value)}
	min={-40}
	max={40}
	step={2}
/>

Fixed width

By default, the picker will try to calculate maximum width based on the max value. If it's not set, the width defaults to 4 characters.

In cases where min is less than 0, the width is slightly increased to account for the - sign.

If you set the width to a certain number of characters, you can use the fixedWidth prop. Decimal numbers are allowed.

<NumberPicker
	value={value}
	onChange={(value) => setValue(value)}
	max={999}
	fixedWidth={12}
/>

Prefix and suffix

<NumberPicker
	value={value}
	onChange={(value) => setValue(value)}
	prefix='€'
/>

<NumberPicker
	value={value}
	onChange={(value) => setValue(value)}
	suffix='item(s)'
/>

Additional controls

<NumberPicker
	value={value}
	onChange={(value) => setValue(value)}
>
	<Button
		icon={icons.resetToZero}
		tooltip='Reset'
		onPress={() => setValue(0)}
		disabled={value === 0}
		type='ghost'
	/>
</NumberPicker>

Label, icon, subtitle, help, inline

<NumberPicker
	value={value}
	onChange={(value) => setValue(value)}
	label='Pick a number'
	icon={icons.emptyCircle}
	help='Help text'
/>

<NumberPicker
	value={value}
	onChange={(value) => setValue(value)}
	label='Pick a number'
	icon={icons.emptyCircle}
	subtitle='Subtitle text'
	inline
/>