Skip to content
BigBang

Popular

    ↑↓Navigate↵OpenEscClose
    TR

    Components

    NumberField

    A number field with step buttons and local formatting, for values that are not money.

    Storybook
    Storybook
    Source
    Source

    Installation

    Section titled “Installation”
    Package
    @bigbang/ui
    Import
    import { NumberField } from '@bigbang/ui';
    Source
    NumberField.tsx
    Storybook
    NumberField · Playground

    NumberField is in the @bigbang/ui package.

    import { NumberField } from '@bigbang/ui';
    

    <NumberField label="Number of days" unit="days" min={1} max={30} value={days} onValueChange={setDays} />;

    Props

    Section titled “Props”
    labelRequired
    Description
    The visible label of the field, bound to the input with <label>. A placeholder does not replace it.
    Type
    string
    description
    Description
    Help text under the field, linked to the input with aria-describedby. Say the range here when it matters ("1 ile 30 arası").
    Type
    ReactNode
    error
    Description
    When set, the field is marked invalid and the message is read with the input.
    Type
    string
    invalid
    Description
    Marks the field invalid without a message, for example when the message is in an error summary.
    Type
    boolean
    Default
    false
    required
    Description
    The value is required: the input gets required, and the label is marked.
    Type
    boolean
    Default
    false
    necessityIndicator
    Description
    Which fields the form marks: 'required' marks required fields, 'optional' marks the others.
    Type
    'required' | 'optional'
    Default
    'required'
    size
    Description
    Input height: 32, 36 and 40 px.
    Type
    'sm' | 'md' | 'lg'
    Default
    'md'
    value
    Description
    Controlled value; null while empty. Pass it with onValueChange.
    Type
    number | null
    defaultValue
    Description
    Initial value when the field is uncontrolled.
    Type
    number
    onValueChange
    Description
    Called while the user types or steps, with the parsed number or null.
    Type
    (value: number | null, details: NumberFieldRootChangeEventDetails) => void
    onValueCommitted
    Description
    Called once the value is committed: on blur, Enter or a finished step. Validate or save here.
    Type
    (value: number | null, details: NumberFieldRootCommitEventDetails) => void
    min
    Description
    Smallest allowed value. A typed value below it is raised to it on blur, and the change is announced.
    Type
    number
    max
    Description
    Largest allowed value. A typed value above it is lowered to it on blur, and the change is announced.
    Type
    number
    step
    Description
    Amount added or removed by the stepper and the arrow keys.
    Type
    number
    Default
    1
    largeStep
    Description
    Amount for Page Up and Page Down, and Shift with an arrow key.
    Type
    number
    Default
    10
    format
    Description
    Number formatting such as { style: 'percent' } or fraction digits, in the Provider language. Not for money: use AmountInput.
    Type
    Omit<NumberFormatOptions, 'style' | 'currency'> & { style?: 'unit' | 'decimal' | 'percent'; }
    unit
    Description
    A short unit after the number, such as "gün" or "adet". It is added to the accessible name in brackets.
    Type
    string
    stepper
    Description
    Shows the decrement and increment buttons inside the field.
    Type
    boolean
    Default
    true
    placeholder
    Description
    Text shown while the field is empty, such as an example value.
    Type
    string
    readOnly
    Description
    The value can be read, focused and copied but not changed.
    Type
    boolean
    Default
    false
    disabled
    Description
    Disables the field and its label; the value is not submitted with the form.
    Type
    boolean
    Default
    false
    name
    Description
    Field name used when the form is submitted.
    Type
    string
    className
    Description
    Added to the root element; use it for layout only.
    Type
    string

    Data attributes

    Section titled “Data attributes”
    • data-component="number-field": on the root element.
    • data-part: label, box, control, unit, stepper, decrement, increment, description, error.
    • data-disabled, data-readonly, data-invalid: from Base UI, on the root and parts.