Switch
A labeled binary setting with native form participation and switch semantics.@gemologic/sheen · formsPlayground
Refresh this view automatically.
<Switch label="Live updates" defaultChecked description="Refresh this view automatically." />Variant matrix
Live updates
Refresh this view automatically.
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Switch.tsx- Tokens
--sheen-color-accent--sheen-color-border-control--sheen-color-focus-ring--sheen-icon-size-md
Accessibility
Role: switchKeyboard: Tab, Shift+Tab, SpaceDo
- Use a stable label describing the setting, not its current value.
Do not
- Do not use mixed state; a switch is strictly on or off.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
description | string | — | Associated supporting instructions. |
id | string | — | Root container ID used to derive internal IDs. |
ref | HTMLDivElement | ((element: HTMLDivElement) => void) | undefined | — | Root container reference; inputRef targets the native input. |
onPointerDown | NonNullable<JSX.EventHandlerUnion<HTMLDivElement, PointerEvent, JSX.EventHandler<HTMLDivElement, PointerEvent>> | undefined> | undefined | — | Native root pointer-down handler composed with focus behavior. |
label * | string | — | Required visible label, unchanged between on and off. |
error | string | — | Associated error marking the control invalid without moving focus. |
checked | boolean | — | App-owned state, retained on reset unless the app changes it. |
defaultChecked | boolean | false | Initial uncontrolled state restored on uncanceled reset. |
onCheckedChange | ((checked: boolean) => void) | undefined | — | Receives the requested boolean state, not a DOM event. |
disabled | boolean | false | Prevents changes, keyboard focus, and form submission. |
readOnly | boolean | false | Prevents changes while retaining focus and submission. |
required | boolean | false | Requires the switch to be on for native form validation. |
name | string | — | Native form name; empty or omitted names are not submitted. |
form | string | undefined | — | External owning form ID, forwarded to the native input. |
value | string | on | Value submitted when on. |
inputRef | ((element: HTMLInputElement) => void) | undefined | — | Receives the native input. |