NumberField

Result

Loading...

Live Editor

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

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

With step, min/max values, and roundToStep

By default the step prop will round to the nearest multiple of the step on blur and with the use of the spin buttons. If you want to allow any value, set roundToStep to false.

Result

Loading...

Live Editor

<> <NumberField label="With step value" minValue={0} maxValue={100} defaultValue={55} step={10} className="mb-3" /> <NumberField label="With roundToStep false" minValue={0} maxValue={100} defaultValue={55} step={10} roundToStep={false} /> </>

<>
    <NumberField
        label="With step value"
        minValue={0}
        maxValue={100}
        defaultValue={55}
        step={10}
        className="mb-3"
    />

    <NumberField
        label="With roundToStep false"
        minValue={0}
        maxValue={100}
        defaultValue={55}
        step={10}
        roundToStep={false}
    />
</>

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

Loading...

Live Editor

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

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

Percent

Result

Loading...

Live Editor

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

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

PlusMinus

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

Result

Loading...

Live Editor

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

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

Within a Form

The NumberField component has unique change behavior compared to other form components. The onChange callback will only be fired when the field is blurred. It can create unpredictable behavior when used in a Form or a Formik context. To validate immediately onChange we recommend using an async onChange callback to set the field value and then validate the form or the field separately.

Result

Loading...

Live Editor

<Form onSubmit={(values, { setSubmitting }) => { console.log(values); setSubmitting(false); }} validationSchema={object().shape({ numberfield: number().required() })} > {({ validateForm, setFieldValue }) => ( <FormField> <NumberField name="numberfield" label="Immediately Validating Numberfield" onChange={async (value) => { await setFieldValue('numberfield', value); await validateForm(); }} /> </FormField> )} </Form>

<Form
    onSubmit={(values, { setSubmitting }) => {
        console.log(values);
        setSubmitting(false);
    }}
    validationSchema={object().shape({ numberfield: number().required() })}
>
    {({ validateForm, setFieldValue }) => (
        <FormField>
            <NumberField
                name="numberfield"
                label="Immediately Validating Numberfield"
                onChange={async (value) => {
                    await setFieldValue('numberfield', value);
                    await validateForm();
                }}
            />
        </FormField>
    )}
</Form>

Analytics

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' },
	},
};

Props