Design System

Number Field

Range

Renders an input with type="number". min, max, and step constrain the accepted value and drive the native increment and decrement controls. FieldLabel, FieldMessage, validation tones, and disabled state work the same as TextField; see the Field page for those.

<Stack space="large">
    <NumberField
        id="nf-a"
        label="Quantity"
        min={0}
        max={10}
        step={1}
        value={1}
    />
    <NumberField
        id="nf-b"
        label="Price"
        secondaryLabel="USD"
        min={0}
        step={0.01}
        value={9.99}
    />
</Stack>