Checkbox

Purpose

Checkboxes are for binary selection — something is either included or it is not. In a travel booking context they appear wherever a guest must opt in to optional extras (travel insurance, room upgrades, airport transfers) or confirm a set of conditions (terms, consent, notification preferences).

Usage

Use a checkbox group when the user may select any number of items from a fixed set. Use a single standalone checkbox for a boolean toggle that is not time-sensitive — for example confirming agreement to terms. For a toggle that immediately performs an action without a form submit, prefer the Toggle component instead. Do not use checkboxes for mutually exclusive choices — when only one option may be active at a time, use RadioButton.

Checkboxes typically sit within a form step of the booking funnel (extras, consent), grouped under a <fieldset> with a shared legend.

Anatomy

Variants

Unchecked

The default resting state. A grey-300 border on a white background signals that the option is available but not selected.

---

Checked

Teal background and border with a white checkmark. The selected state is visually distinct at a glance and never relies on colour alone — the checkmark icon provides a second signal.

---

Indeterminate

Shown when a parent checkbox controls a group of children and only some are checked. The white dash on a teal background is the conventional "mixed" signal. Set the indeterminate prop — it is applied via a ref on the underlying input element because the HTML indeterminate property is not an attribute.

When to use: Parent checkboxes in a hierarchical selection list. For example: "Select all destinations" controls a group of regional destination checkboxes where a subset is already chosen.

---

With description

A description prop adds secondary text directly beneath the label. Use it to clarify what the option includes without extending the label itself.

---

Checkbox group

Stack multiple checkboxes with consistent gap-3 spacing to form a selection group. Wrap the group in a <fieldset> with a <legend> to give assistive technology the shared context.

States

Focus

The focus ring appears only on keyboard focus (:focus-visible). It is a 2 px teal ring with 2 px offset around the control box. Mouse clicks do not show the ring.

Disabled

The entire control — box, label, and description — is rendered at reduced opacity. The cursor changes to not-allowed. The input cannot be toggled and is removed from the tab order.

---

Error

An error message is shown below the control when validation fails. The control border turns red. Use this when a required checkbox has not been checked before form submission.

---

With help text

Help text appears below the control and provides context or guidance. It is hidden when an error message is present.

Best practices

Props

Accessibility

Keyboard interaction

Label association

The label prop is connected to the input via htmlFor / id. Clicking anywhere on the label text or description toggles the checkbox — important for touch targets and motor accessibility.

Groups with fieldset and legend

When rendering multiple checkboxes together, always wrap them in a <fieldset> and provide a <legend>. Screen readers announce the legend text before each checkbox label, giving users the shared group context without it being embedded in every label individually.

<fieldset className="border-0 p-0 m-0">
  <legend className="text-sm font-semibold text-kuoni-dark mb-3">Holiday extras</legend>
  <div className="flex flex-col gap-3">
    <Checkbox label="Travel insurance" />
    <Checkbox label="Airport transfers" />
  </div>
</fieldset>

Indeterminate state

The indeterminate DOM property is not reflected as an HTML attribute, so it cannot be set in JSX. The Checkbox component handles this internally via a useEffect and a ref. Screen readers announce indeterminate checkboxes as "mixed" — the ARIA-defined value for partially-selected state.

Error announcement

When error is set:

• aria-invalid="true" is applied to the input element.
• aria-describedby points to the error paragraph.
• The error paragraph has role="alert" so assistive technology announces the message immediately when it appears.

Colour and contrast

The checked state uses a teal background (#005B55) with a white checkmark. Contrast between the icon and background is above 7:1. The error border colour (#C0392B) is accompanied by both a warning icon and error text — never colour alone.

Related components

• RadioButton — use instead when only one option in a set may be selected.
• Toggle — use instead for a boolean setting that applies immediately without a form submit.