Components

NumberField

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

Storybook: Storybook
Source: Source

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

The step buttons sit at the end of the box; the arrow keys change the value too.

Quantity

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

export default function Default() {
  return <NumberField label="Quantity" defaultValue={1} min={0} max={99} className="max-w-xs" />;
}

States

Empty, at a bound (Decrease disabled), invalid, read-only and disabled.

Quantity

Help text goes here.

Number of days

Value must be between 1 and 30.

Quantity

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

export default function States() {
  return (
    <div className="flex max-w-xs flex-col gap-lg">
      <NumberField label="Quantity" placeholder="0" />
      <NumberField label="Quantity" defaultValue={0} min={0} max={10} description="Help text goes here." />
      <NumberField label="Number of days" defaultValue={45} error="Value must be between 1 and 30." />
      <NumberField label="Quantity" defaultValue={3} readOnly />
      <NumberField label="Quantity" defaultValue={3} disabled />
    </div>
  );
}

With a unit

unit shows a short unit next to the value and adds it to the accessible name. stepper={false} removes the buttons.

Number of days

Enter a value from 1 to 30.

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

export default function WithUnit() {
  return (
    <NumberField
      className="max-w-xs"
      label="Number of days"
      unit="days"
      defaultValue={7}
      min={1}
      max={30}
      stepper={false}
      description="Enter a value from 1 to 30."
    />
  );
}

Formatted

format takes Intl options; a percentage is written in the Provider language.

Rate

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

export default function Formatted() {
  return (
    <Provider locale="en-GB">
      <NumberField
        className="max-w-xs"
        label="Rate"
        defaultValue={0.125}
        step={0.005}
        min={0}
        max={1}
        format={{ style: 'percent', minimumFractionDigits: 1 }}
      />
    </Provider>
  );
}

Light and dark mode

The box and buttons use semantic tokens only.

Quantity

Help text goes here.

Number of days

Value must be between 1 and 30.

Quantity

Help text goes here.

Number of days

Value must be between 1 and 30.

Quantity

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

export default function States() {
  return (
    <div className="flex max-w-xs flex-col gap-lg">
      <NumberField label="Quantity" placeholder="0" />
      <NumberField label="Quantity" defaultValue={0} min={0} max={10} description="Help text goes here." />
      <NumberField label="Number of days" defaultValue={45} error="Value must be between 1 and 30." />
      <NumberField label="Quantity" defaultValue={3} readOnly />
      <NumberField label="Quantity" defaultValue={3} disabled />
    </div>
  );
}