Components / forms

forms · @awesome-ds/react

Checkbox

Binary choice with label.

Rules: rule.a11y.wcag-aa

State matrix

uncheckedrequired
checkedrequired
disabledrequired

Anatomy

  • native checkbox
  • visible label
  • optional description

Keyboard contract

Space toggles the focused checkbox; Tab moves to the next control.

Screen-reader contract

Announces checkbox name, checked/mixed state, and disabled state.

Content rules

  • Write the label as a selectable statement.
  • Use a group legend for related choices.

Public API

PropTyperequiredDescription
idstringrequiredAssociation identifier
labelstringrequiredChoice label
…nativeOmit<InputHTMLAttributes<HTMLInputElement>, "type">—Native checkbox attributes

Adaptation contracts

RTL
Keep label, input, hint, and error aligned to inline-start without changing DOM order.
High contrast
Use system field borders, focus indicators, and non-color invalid cues.
Reduced motion
Change validation and selection states without sliding or spring motion.

Verification IDs

Checkbox/native-toggle

Live

Live

Copyable example

import { Checkbox } from "@awesome-ds/react";

<Checkbox id="tos" label="Accept terms" />