Toggle

iOS-style switch and button-style toggle with controlled and uncontrolled modes.

Actionsforminteractiveswitch

Workbench

Rendering Toggle…

Installation

Copy the source into your project with the CLI. It lands under @/components/ui and is yours to edit.

npx mlola-ui add toggle

Usage

TSX

import { Switch } from "@/components/ui/toggle";

export default function Example() {
  return <Switch label="Email notifications" defaultChecked />;
}

Styling comes from the engine stylesheet and the nearest theme. Set it once at the root:

HTML

<html data-theme="graphite" data-mode="light">

Examples

In a settings form

A switch takes effect at once; a checkbox and a choice wait for the form to be saved.

Rendering In a settings form…

HTML

Without React, write this markup and load @mlola-ui/behavior once. It runs the keyboard, focus and state for every element marked data-ml="switch", including markup added later, and needs no build step.

HTML

<span class="ml-switch-field">
  <button class="ml-toggle" type="button" data-ml="switch" role="switch" aria-checked="false" aria-labelledby="notify-label" data-state="unchecked" data-size="md" data-hit="expand">
    <span class="ml-toggle-thumb" aria-hidden="true"></span>
  </button>
  <span class="ml-switch-label" id="notify-label">Email notifications</span>
</span>

HTML

<script type="module">
  import { observe } from "@mlola-ui/behavior";
  observe();
</script>

Options

Component	Prop	Values	Default
`Switch`	`size`	`smmdlg`	`md`
`Toggle`	`size`	`smmdlg`	`md`

Every prop with a fixed set of values, read from the exported TypeScript types with its doc comment. Open the Code tab above for the rest of the API.

Classes and attributes

A class names each element; data-* and aria-* attributes carry its variant and state. The values listed are the ones the stylesheet draws; the default needs no attribute.

Class	Attributes
`ml-switch-field`	—
`ml-switch-label`	—
`ml-toggle`	`aria-checked="true"data-size="lg \| sm"data-state="checked"`
`ml-toggle-thumb`	—
`ml-toggle-button`	`aria-pressed="true"data-state="on"`

Accessibility and theming

Semantic elements, accessible names and state relationships are part of the contract.
Keyboard, pointer and touch paths are operable; focus stays visible in every theme.
Light and dark modes pass WCAG AA contrast in all 5 canonical themes.
Reduced motion and forced colors keep meaning and operation.

Open the standalone preview