Label

Preview

import { FormGroup, Hint, Input, Label } from '@govtech-bb/react';

<FormGroup>
  <Label htmlFor="nrn">National registration number</Label>
  <Hint id="nrn-description">
    It is on your national ID card. For example, 850101-0123
  </Hint>
  <Input id="nrn" name="nrn" aria-describedby="nrn-description" />
</FormGroup>;

<div class="govbb-form-group">
  <label class="govbb-label" for="nrn">National registration number</label>
  <span class="govbb-hint" id="nrn-description">
    It is on your national ID card. For example, 850101-0123
  </span>
  <input
    class="govbb-input"
    id="nrn"
    name="nrn"
    type="text"
    aria-describedby="nrn-description"
  />
</div>

The Label component names the field it sits above, so users know what answer is expected before they start typing. Every form control (input, select, text area, checkbox, or radio) needs a visible label.

Usage

Best practices

Connect the label to its control

Match the label’s for value to the control’s id. This lets users select the label to focus the control and gives assistive technology a reliable name.

Write short, direct label text

Use sentence case, put the important words first and do not end labels with a colon. Put examples, format rules and explanations in hint text instead.

Writing label text

Write labels as short noun phrases, such as “Email address”, rather than questions or instructions. Keep the label focused on naming the field. Put any extra detail, such as an expected format or example, in hint text instead.

Pairing with hint text

Use hint text (.govbb-hint) beneath the label to explain a format or give an example, such as “It is on your national ID card”. Link the hint to its control with aria-describedby so it is announced alongside the label.

import { FormGroup, Input, Label } from '@govtech-bb/react';

<FormGroup>
  <Label htmlFor="email-address">Email address</Label>
  <Input id="email-address" name="email-address" type="email" />
</FormGroup>;

<div class="govbb-form-group">
  <label class="govbb-label" for="email-address">Email address</label>
  <input
    class="govbb-input"
    id="email-address"
    name="email-address"
    type="email"
  />
</div>

Marking optional fields

Most fields on a government form are required, so required fields carry no mark. Never use asterisks. When a field is genuinely optional, say so in the label with a muted “(optional)” suffix.

import { FormGroup, Input, Label } from '@govtech-bb/react';

// Standalone label
<Label htmlFor="middle-name" optional>
  Middle name
</Label>;

// Self-composing fields derive it from an explicit required={false}
<Input label="Middle name" name="middle-name" required={false} />;

<div class="govbb-form-group">
  <label class="govbb-label" for="middle-name">
    Middle name <span class="govbb-label__optional">(optional)</span>
  </label>
  <input class="govbb-input" id="middle-name" name="middle-name" type="text" />
</div>

• Use “(optional)” only when most fields in the form are required. If most fields are optional, question the form before questioning the labels.
• Be consistent within a form: mark every optional field or none.
• A field with no indicator is assumed required, so make sure it really is.
• The indicator does not validate anything. Pair it with the required attribute on the controls that must be filled in; the suffix sits inside the label, so screen readers announce it with the field name.

Grouping controls

Use only one label per control. To name a group of related controls, such as a set of checkboxes or radio buttons, use a <fieldset> with a <legend> instead of a label. This frames the question for the whole group rather than a single field.