Switch v0.1.0 Forms

On/off toggle backed by a native role=switch input.

import { Switch } from "latticeui-react";

Examples

States

Email notificationsPublic profileDisabled

Show code

<Switch label="Email notifications" defaultChecked />
<Switch label="Public profile" />
<Switch label="Disabled" disabled />

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`root`	`label`	`[data-scope="switch"][data-part="root"]`
`control`	`span`	`[data-scope="switch"][data-part="control"]`
`thumb`	`span`	`[data-scope="switch"][data-part="thumb"]`
`label`	`span`	`[data-scope="switch"][data-part="label"]`

Props

Prop	Type	Default
`label` *	`ReactNode`	—
`checked`	`boolean`	—
`defaultChecked`	`boolean`	`false`
`onCheckedChange`	`(checked: boolean) => void`	—
`disabled`	`boolean`	—
`name / value`	`native form props`	—

Accessibility

Roles: switch (native input)

Key	Action
`Space`	toggles

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="switch"][data-part="control"] {
  /* your overrides */
}

State attributes: data-state=checked|uncheckeddata-disabled