Label

When to use

Label names a control that does not use Field: the text next to a checkbox or switch, an input in a table cell, a form whose layout you build yourself.

When not to use

• For a control inside Field: Field’s label prop binds the label.
• For TextInput: TextInput renders its own label.
• For a heading or a description: Use Heading or Text; Label only names controls.

Anatomy

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>
  );
}

1. Text: the label-md or label-sm text style, color-text-default.
2. Necessity marker: * with a visually hidden “required”, or “(optional)”.

Behaviour

• A control bound by htmlFor takes the label text as its accessible name.
• Clicking the label focuses the control; it switches a checkbox.
• The * carries aria-hidden; only “zorunlu” or “required” is read in the name.
• disabled changes only the look; disable the control as well.

Guidelines

• Place the label above the control, or to the right of a checkbox.
• Use one marking convention in a form: mark the minority.
• Give the control an id and pass the same value as htmlFor.

Content

• The label is a short noun phrase; do not end it with a colon.
• A checkbox label states the option in full: “Get notifications by email”.

Turkish	English
zorunlu	required
isteğe bağlı	optional

Related components

• Field: binds label, help text and error together.
• TextInput: a text input with its own label.
• VisuallyHidden: when a hidden label is needed.