NumberField
The <NumberField> component allows users to enter numbers with a keyboard. This includes plain numbers as well as percentages, decimals and sums of money.
It consists of a label, an input field and a help text. The latter also includes error messages.
A special propertiy is the hideStepper prop, with that you can choose if you want to hide the buttons for adding/ removing values. You can also set all properties from the regular HTML input element.
Import
import { NumberField } from '@marigold/components';Appearance
Sorry! There are currently no variants and sizes available.
Props
| Property | Type | Default | Description |
|---|---|---|---|
label | ReactNode | none | The label text. |
description | ReactNode | none | A helpful text. |
errorMessage | ReactNode | none | An error message. |
error | boolean | false | If `true`, the field is considered invalid and if set the errorMessage is shown instead of the `description`. |
value | number | none | The value of the input field. |
disabled | boolean | false | If `true`, the input is disabled. |
required | boolean | false | If `true`, the input is required. |
readOnly | boolean | false | If `true`, the input is readOnly. |
onChange | function | none | A callback function that is called with the input's current value when the input value changes. |
formatOptions | Intl.NumberFormatOptions | none | Apply formatting. See `Intl.NumberFormatOptions` for available options. |
width | string | number | full | Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width |
minValue | number | none | Sets the minimal value of the input. |
maxValue | number | none | Sets the maximal value of the input. |
hideStepper | boolean | false | Property for hiding the step buttons of the field. |
step | number | 1 | Sets the amount of steps the input should take. |
... | | - | Yes you can use all regular attributes of input! |
Examples
Simple Number Field
This example shows a regular <NumberField> without any special props.
Disabled Number Field
You can disable the <NumberField> so that the user can't interact with it anymore.
Required Number Field
If you want a <NumberField> to be required, you just have to add the property required. With that the small required icon appears next to the label.
Number Field with an Error
This example shows how to use the error with the errorMessage.
Min and max Values
The example shows how to use the minValue and the maxValue. You can see that you can't get under "0" or above "100". If you try to, the step buttons will be disabled.
Step Amount
The step property sets the amount of steps the input should use. Default is set to "1".
Hide Stepper
If you don't want the step buttons to appear, you can easily remove these with the hideStepper property.
Display different Format Options
In this example you can see how different <NumberFields> can look like. You can choose between all Intl.NumberFormatOptions. In this case you can see percent,unit, decimal and currency.
For a full list of supported options, see corresponding MDN Docs. A full list of suported units can be seen here.