Switch
Toggles an immediate binary setting with native checked and form semantics.
Contract
| Decision | Choose |
|---|---|
| state | defaultChecked for uncontrolled state, or checked with onCheckedChange |
| availability | readOnly keeps focus and form value; disabled removes interaction and submission |
| semantics | use for an immediate setting; use a checkbox for a choice submitted with a batch |
| form | name, value, uncheckedValue, form, required, and native reset |
Pair the switch with TRField.Label inside TRField.Item, or give it an accessible name with aria-label. Field.Item links the label to the switch without a manual id or htmlFor. Space toggles a focused editable switch.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/switch.css';Scroll inside the code area to read long lines.
Imports
import { TRField } from '@tinyrack/ui/components/field';
import { TRSwitch } from '@tinyrack/ui/components/switch';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Show the current setting
Keep or remove interaction
Editable, read only, and disabled permalink
Read-only switches stay focusable and preserve their form value; disabled switches leave the tab order and submission.
Require an acknowledgement
API
State and availability
| Prop | Type / default | Purpose |
|---|---|---|
checked, defaultChecked | boolean, false | Controls or initializes the setting. |
onCheckedChange | (checked, details) => void | Reports an attempted change. |
disabled, readOnly | boolean, false | Removes interaction, or keeps a focusable immutable value. |
Forms and composition
name, value, uncheckedValue, form, required, and inputRef are forwarded to the hidden native input. Uncontrolled roots restore defaultChecked on reset; controlled roots remain governed by checked. Root and Thumb support Base UI render, refs, events, and state-driven className and style, with checked, unchecked, disabled, read-only, and invalid data attributes.
The module exports TRSwitch, both named parts, and their prop and state types. CSS is opt-in.