NumberField

This component does not support an uncontrolled state.

Result

Live Editor

<NumberField label="Number" minValue={0} maxValue={10} defaultValue={3.14159265359} />

<NumberField label="Number" minValue={0} maxValue={10} defaultValue={3.14159265359} />

Currency

The formatOptions prop allows you to pass in any of the Intl.NumberFormat options. The displayed value will be formatted when the field is blurred.

Result

Live Editor

<NumberField
    label="Currency"
    defaultValue={1.5}
    formatOptions={{
        style: 'currency',
        currency: 'USD',
    }}
/>

<NumberField
    label="Currency"
    defaultValue={1.5}
    formatOptions={{
        style: 'currency',
        currency: 'USD',
    }}
/>

Result

Live Editor

<NumberField
    label="Percent"
    defaultValue={0.5}
    formatOptions={{
        style: 'percent',
    }}
/>

<NumberField
    label="Percent"
    defaultValue={0.5}
    formatOptions={{
        style: 'percent',
    }}
/>

The NumberField component supports a plus/minus stepper. The showButtons prop will display the stepper buttons.

Result

Live Editor

<NumberField label="Number" minValue={0} maxValue={10} defaultValue={3.14159265359} showButtons />

<NumberField label="Number" minValue={0} maxValue={10} defaultValue={3.14159265359} showButtons />

The NumberField component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'NumberField',
	actions: {
		onChange: { type: 'NUMBERFIELD_CHANGE', payload: 'Change' },
	},
};