Field

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

Live example, StorybookOpen in Storybook

Default

Field binds the label to the control with <label> and the help text with aria-describedby. A bare Field.Control renders an <input> with the TextInput look.

Field label

Help text goes here.

LightDark

Copy code

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

export default function Default() {
  return (
    <div className="max-w-80">
      <Field label="Field label" description="Help text goes here.">
        <Field.Control />
      </Field>
    </div>
  );
}

Required and optional

required adds * and a visually hidden “required” to the label. necessityIndicator="optional" writes “(optional)” on the fields that are not required.

Field label* required

Field label(optional)

LightDark

Copy code

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

export default function Necessity() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-80 flex-col gap-lg">
        <Field label="Field label" required>
          <Field.Control required />
        </Field>
        <Field label="Field label" necessityIndicator="optional">
          <Field.Control />
        </Field>
      </div>
    </Provider>
  );
}

Error messages

error makes the field invalid. Pass a list for several messages; they render as a bulleted list and are linked to the control.

Field label

This field cannot be empty.

Field label

Help text goes here.

• This field cannot be empty.
• Enter at least 3 characters.

LightDark

Copy code

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

export default function Errors() {
  return (
    <div className="flex max-w-80 flex-col gap-lg">
      <Field label="Field label" error="This field cannot be empty.">
        <Field.Control />
      </Field>
      <Field label="Field label" description="Help text goes here." error={['This field cannot be empty.', 'Enter at least 3 characters.']}>
        <Field.Control />
      </Field>
    </div>
  );
}

Character counter

Field.Counter shows the characters used against the limit. From 80 % of the limit the remaining characters are announced politely; over the limit the counter turns danger.

Field label

0/20

Help text goes here.

LightDark

Copy code

import { Field, Provider } from '@bigbang/ui';
import { useState } from 'react';

export default function Counter() {
  const [value, setValue] = useState('');
  return (
    <Provider locale="en-GB">
      <div className="max-w-80">
        <Field label="Field label" description="Help text goes here.">
          <Field.Control value={value} onValueChange={setValue} />
          <Field.Counter value={value} max={20} />
        </Field>
      </div>
    </Provider>
  );
}

Light and dark mode

Colours come from the color-text-* and color-border-* tokens.

Light

Field label

This field cannot be empty.

Field label

Help text goes here.

• This field cannot be empty.
• Enter at least 3 characters.

Dark

Field label

This field cannot be empty.

Field label

Help text goes here.

• This field cannot be empty.
• Enter at least 3 characters.

Copy code

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

export default function Errors() {
  return (
    <div className="flex max-w-80 flex-col gap-lg">
      <Field label="Field label" error="This field cannot be empty.">
        <Field.Control />
      </Field>
      <Field label="Field label" description="Help text goes here." error={['This field cannot be empty.', 'Enter at least 3 characters.']}>
        <Field.Control />
      </Field>
    </div>
  );
}