Checkbox

A checkbox allows users to select one or more options from a set.

Design

The Checkbox allows users to select one or multiple options from a list. Unlike radio buttons, checkboxes are non-exclusive and support multiple selections. It is used when more than one option can be valid, the selection does not require an immediate action, or the user needs to confirm or accept conditions.

This component is fully responsive and intentionally designed to be used across all viewports — mobile, tablet and desktop — with no alternative versions required.

When to use it (and when not to)

Use checkboxes when:

• The user can select 0, 1, or multiple options.
• Options are not mutually exclusive.
• Dealing with preferences, filters, or settings.

Do not use checkboxes when:

• Only one option can be selected (use radio buttons).
• The action is binary and immediate (use a switch).

Quick summary of accessibility & consistency

• Use native <input type="checkbox"> elements. Do not recreate checkboxes using <div> or <span>.
• The checkbox must be associated with a <label> using the for attribute or by wrapping the input inside the label.
• Make sure the checkbox is reachable using Tab navigation and toggleable using Space.
• Display a visible focus style when focused via keyboard, clearly distinguishable and not relying only on colour.
• The checked and unchecked states must be correctly announced by assistive technologies.

Properties

Size : Small by State

Checkbox

Border radius: 0

.item/checkbox

State: Default

Radio button label

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Text style: Body/7-default

number

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Text style: Body/7-default

Hover

.item/checkbox

State: Hover

Radio button label

Text style: Body/7-default

number

Text style: Body/7-default

Selected

.item/checkbox

State: Selected

Radio button label

Text color:

color-foreground-neutral-emphasis#000000

color-foreground-neutral-emphasis#15151b

Text style: Body/7-default

number

Text color:

color-foreground-neutral-emphasis#000000

color-foreground-neutral-emphasis#15151b

Text style: Body/7-default

Disabled

.item/checkbox

State: Disabled

Radio button label

Text color:

color-foreground-neutral-subtle#4d4d4d

color-foreground-neutral-subtle#6c7073

Text style: Body/7-default

number

Text color:

color-foreground-neutral-subtle#4d4d4d

color-foreground-neutral-subtle#6c7073

Text style: Body/7-default

Disabled Selected

Checkbox

Width: 126

.item/checkbox

State: Disabled Selected

Radio button label

Text color:

color-foreground-neutral-subtle#4d4d4d

color-foreground-neutral-subtle#6c7073

Text style: Body/7-default

number

Text color:

color-foreground-neutral-subtle#4d4d4d

color-foreground-neutral-subtle#6c7073

Text style: Body/7-default

Focus

Checkbox

Border color:

color-border-focus-neutral-default#c57046

color-border-focus-neutral-default#0072f0

Border weight: 2

Border radius: 2

Checkbox

Size: Small

Size : Large by State

Checkbox

Border radius: 0

.item/checkbox

State: Default

Radio button label

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Text style: Body/6-default

number

Text color:

color-foreground-neutral-default#333333

color-foreground-neutral-default#282830

Text style: Body/6-default

Hover

.item/checkbox

State: Hover

Radio button label

Text style: Body/6-default

number

Text style: Body/6-default

.item/checkbox : State

Checkbox

Border color:

color-border-neutral-muted#999999

color-border-neutral-muted#a8aaac

Border weight: 1

Hover

Checkbox

Background color:

color-fill-neutral-subtle#e5e3e1

color-fill-neutral-subtle#6c7073

Selected

Checkbox

Background color:

color-fill-neutral-emphasis#000000

color-fill-neutral-emphasis#000000

Disabled

Checkbox

Border color:

color-border-neutral-subtle#666666

color-border-neutral-subtle#6c7073

Disabled Selected

Checkbox

Border color:

color-border-neutral-subtle#666666

color-border-neutral-subtle#6c7073

Styling

Colors

Name	Applied as	Applied to
color-border-neutral-muted	Border color	Checkbox (default)
color-border-neutral-muted	Border color	Checkbox (default)
color-border-neutral-subtle	Border color	Checkbox (disabled)
color-border-neutral-subtle	Border color	Checkbox (disabled)
color-fill-neutral-emphasis	Background color	Checkbox (selected)
color-fill-neutral-emphasis	Background color	Checkbox (selected)
color-fill-neutral-subtle	Background color	Checkbox (hover)
color-fill-neutral-subtle	Background color	Checkbox (hover)
color-foreground-neutral-default	Text color	Label (default / hover)
color-foreground-neutral-default	Text color	Label (default / hover)
color-foreground-neutral-emphasis	Text color	Label (selected)
color-foreground-neutral-emphasis	Text color	Label (selected)
color-foreground-neutral-subtle	Text color	Label (disabled)
color-foreground-neutral-subtle	Text color	Label (disabled)
color-border-focus-neutral-default	Border color	Checkbox (focus)
color-border-focus-neutral-default	Border color	Checkbox (focus)

Text Styles

Name	Applied as	Applied to
Lorem Ipsum typography-body-6	Text style	Label (large)
Lorem Ipsum typography-body-6	Text style	Label (large)

Usage

Do

Guidance on how to use a component.

• Use checkboxes when the user can select 0, 1, or multiple options.
• Use checkboxes for options that are not mutually exclusive.
• Use checkboxes for preferences, filters, or settings.
• Always associate a visible label with the checkbox.
• Provide clear visual feedback for checked, unchecked, and disabled states.

Don’t

Guidance on what to avoid when using a component.

• Don’t use checkboxes when only one option can be selected — use radio buttons instead.
• Don’t use checkboxes when the action is binary and immediate — use a switch instead.
• Don’t recreate checkboxes using <div> or <span> elements without appropriate ARIA roles.
• Don’t rely solely on colour to indicate the checked or unchecked state.
• Don’t remove the browser default focus outline unless replacing it with an accessible equivalent.

Develop

Styles

A checkbox allows users to select one or more options from a set.

<label class="tng-checkbox-control">
  <input type="checkbox" />
  <span>Unchecked</span>
</label>
<label class="tng-checkbox-control">
  <input type="checkbox" checked />
  <span>Checked</span>
</label>

Unchecked Checked

Elements

Grouping

Group related checkboxes in a <fieldset> with a <legend> to provide a shared group label for screen readers.

<fieldset class="tng-stack">
  <legend class="tng-text-title is-8 mb-xl">
    Notification preferences
  </legend>
  <label class="tng-checkbox-control">
    <input type="checkbox" />
    <span>Email</span>
  </label>
  <label class="tng-checkbox-control">
    <input type="checkbox" />
    <span>SMS</span>
  </label>
</fieldset>

Notification preferences

Email SMS

States

Disabled

<label class="tng-checkbox-control">
  <input type="checkbox" disabled />
  <span>Disabled</span>
</label>
<label class="tng-checkbox-control">
  <input type="checkbox" checked disabled />
  <span>Checked and disabled</span>
</label>

Disabled Checked and disabled

Accessibility

For designers

• All states (default, hover, selected, disabled, focus) must maintain accessible contrast.
• Focus styles must remain visible and meet WCAG AA contrast requirements. Focus should be clearly distinguishable from hover.
• Colour tokens used should be semantic (e.g. foreground/neutral/default) rather than fixed values. This ensures the component adapts correctly to different themes or surfaces.
• The interactive area (checkbox + label) must be large enough to support touch accessibility.

For developers

To ensure the Checkbox meets WCAG 2.1 AA and supports assistive technologies, follow these implementation standards:

1. Semantic HTML
   • Use a native <input type="checkbox"> element. Do not recreate checkboxes using <div> or <span>.
   • The checkbox must be associated with a <label> using the for attribute or by wrapping the input inside the label.
   • Avoid adding click handlers to non-semantic elements to toggle the checkbox.
2. Keyboard Navigation
   • The checkbox must be reachable using Tab navigation.
   • Users must be able to toggle the checkbox using Space.
   • Do not override default keyboard behaviour unless providing a fully accessible alternative.
3. Focus Ring / Visible Focus
   • The checkbox must display a visible focus style when focused via keyboard.
   • The focus indicator must be clearly distinguishable and not rely only on colour.
   • Never remove the browser default focus outline unless replacing it with an accessible equivalent.
   • Focus styles must remain visible even when the checkbox is hovered or checked.
4. Screen Reader Support
   • The checkbox label must clearly describe the option or action it represents.
   • Use aria-describedby when additional helper text or error messages are present.
   • The checked and unchecked states must be correctly announced by assistive technologies.
   • If the checkbox is disabled, ensure the disabled state is conveyed programmatically.
5. Interaction Feedback
   • The checked state must be communicated via the native checked attribute.
   • Visual changes (check icon, background, border) should reinforce state changes.
   • Avoid relying solely on colour to indicate checked or unchecked status.
   • Error states must be clearly communicated visually and programmatically.
6. Responsive and Tap Targets
   • The interactive area (checkbox + label) must be at least 44 px in height to support touch accessibility.
   • Ensure sufficient spacing between checkboxes when presented in a list to avoid accidental activation.

Semantic markup

Use a native <input type="checkbox">. The <label> wrapping pattern keeps the label clickable and announced by screen readers. Do not replace checkbox behavior with non-semantic elements.

Keyboard interaction

• Tab moves focus to each checkbox.
• Space toggles checked/unchecked.
• Focus visibility is handled by the tng-focus-within utility.

Keys	Actions
Tab	Moves focus on the element or outside
Space	Activate or deactivate the element

Label and supporting text

Each checkbox needs a clear visible label. If additional helper or error text is present, connect it with aria-describedby.

Indeterminate state

There is no HTML attribute for the indeterminate state — set it via JavaScript (checkbox.indeterminate = true). Screen readers announce it as “mixed”.