Switch

A binary setting with native checkbox behavior and switch semantics.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Desktop notificationsRequired security alerts

Desktop notifications are on.

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add switch

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<div className="af-choice">
  <Switch id="notifications" name="notifications" defaultChecked />
  <Label htmlFor="notifications">Desktop notifications</Label>
</div>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`size`	`sm \| md \| lg`	`md`
`checked / defaultChecked`	`boolean`	`—`
`onChange`	`ChangeEventHandler<HTMLInputElement>`	`—`

Accessibility

Provide a stable label that does not change when toggled. Space changes the native checked state. The underlying checkbox exposes role=switch, participates in forms and reset, and forwards its input ref. The unchecked value is absent from FormData. Disabled controls cannot be activated.