Toggle
A two-state button for formatting or view options. It exposes aria-pressed; it is not a form field and does not submit a value by itself.
Contract
| Axis | Values | Default |
|---|---|---|
| state | controlled pressed or uncontrolled defaultPressed | off |
| availability | enabled or disabled | enabled |
| label | visible text | required |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/toggle.css';Scroll inside the code area to read long lines.
Imports
import { TRToggle } from '@tinyrack/ui/components/toggle';Scroll inside the code area to read long lines.
Playground
Usage
Examples
API
| Prop | Type | Default | Purpose |
|---|---|---|---|
pressed | boolean | — | Controls the pressed state. |
defaultPressed | boolean | false | Sets the initial uncontrolled state. |
onPressedChange | (pressed, details) => void | — | Reports a requested state change; call details.cancel() to veto it. |
disabled | boolean | false | Removes the button from interaction and sequential focus. |
value | string | generated | Identifies an item inside TRToggleGroup; provide a stable value there. |
className | string | (state) => string | — | Adds consumer classes, optionally from TRToggleState. |
render | ReactElement | (props, state) => ReactElement | <button> | Replaces the rendered element while preserving merged behavior. |
TRToggleProps and TRToggleState are exported from @tinyrack/ui/components/toggle. TRToggle also preserves button refs, styles, native attributes, and event handlers. Native Space/Enter activation, focus, and disabled semantics follow button behavior, and the default button type does not submit an enclosing form. Give every toggle an accessible name. A polymorphic render must preserve button keyboard semantics. Use TRCheckbox or TRSwitch when a value must participate in form submission or required validation.