Component for entering numbers.

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.



To import the component you just have to use this code below.

import { NumberField } from '@marigold/components';


Sorry! There are currently no variants and sizes available.


labelReactNodenoneThe label text.
descriptionReactNodenoneA helpful text.
errorMessageReactNodenoneAn error message.
errorbooleanfalseIf `true`, the field is considered invalid and if set the errorMessage is shown instead of the `description`.
valuenumbernoneThe value of the input field.
disabledbooleanfalseIf `true`, the input is disabled.
requiredbooleanfalseIf `true`, the input is required.
readOnlybooleanfalseIf `true`, the input is readOnly.
onChangefunctionnoneA callback function that is called with the input's current value when the input value changes.
formatOptionsIntl.NumberFormatOptionsnoneApply formatting. See `Intl.NumberFormatOptions` for available options.
widthstring | numberfullSets the width of the field. You can see allowed tokens here:
minValuenumbernoneSets the minimal value of the input.
maxValuenumbernoneSets the maximal value of the input.
hideStepperbooleanfalseProperty for hiding the step buttons of the field.
stepnumber1Sets the amount of steps the input should take.
...-Yes you can use all regular attributes of input!


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.

Something went wrong!

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.