Components / forms

forms · @awesome-ds/react

Switch

Immediate on/off control with switch role.

Rules: rule.a11y.wcag-aa

State matrix

offrequired
onrequired
disabledrequired

Anatomy

  • switch control
  • track and thumb
  • persistent label

Keyboard contract

Space toggles immediately; Enter may toggle through the native button implementation.

Screen-reader contract

role=switch exposes its name and aria-checked state.

Content rules

  • Name the setting, not On or Off.
  • Use only for immediate changes.

Public API

PropTyperequiredDescription
idstringrequiredAssociation identifier
labelstringrequiredSetting name
checkedboolean—Controlled state
onChange(checked: boolean) => void—State-change callback
disabledboolean—Prevents interaction

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

Switch/role-state

Live

Live

Copyable example

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

<Switch id="dark" label="Dark mode" />