Label

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

Live example, StorybookOpen in Storybook

Default

Label renders a native <label>. htmlFor matches the control’s id; clicking the label moves focus to the control.

Field label

LightDark

Copy code

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

export default function Default() {
  return (
    <div className="flex max-w-80 flex-col gap-xs">
      <Label htmlFor="label-default">Field label</Label>
      <input id="label-default" className="h-(--bigbang-input-height-md) w-full rounded-(--bigbang-input-radius) border border-line-input bg-surface-raised px-(--bigbang-input-padding-inline) type-body-md" />
    </div>
  );
}

Required and optional

required adds * and a visually hidden “required” to the label. necessityIndicator="optional" writes “(optional)” on fields that are not required. The marker is the same as in Field.

Field label* requiredField label(optional)

LightDark

Copy code

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

export default function Necessity() {
  return (
    <Provider locale="en-GB">
      <div className="flex flex-col items-start gap-md">
        <Label required>Field label</Label>
        <Label necessityIndicator="optional">Field label</Label>
      </div>
    </Provider>
  );
}

Sizes

size gives 14 px (label-md) or 12 px (label-sm).

Field labelField label

LightDark

Copy code

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

export default function Sizes() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Label size="md">Field label</Label>
      <Label size="sm">Field label</Label>
    </div>
  );
}

Label around the control

When the control is inside the label, htmlFor is not needed. disabled shows the label faded; disable the control too.

Option labelOption label

LightDark

Copy code

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

export default function Wrapping() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Label className="gap-sm">
        <input type="checkbox" />
        Option label
      </Label>
      <Label className="gap-sm" disabled>
        <input type="checkbox" disabled />
        Option label
      </Label>
    </div>
  );
}

Light and dark mode

The colour comes from color-text-default, and from color-text-disabled when disabled.

Light

Option labelOption label

Dark

Option labelOption label

Copy code

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

export default function Wrapping() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Label className="gap-sm">
        <input type="checkbox" />
        Option label
      </Label>
      <Label className="gap-sm" disabled>
        <input type="checkbox" disabled />
        Option label
      </Label>
    </div>
  );
}