Switch

A toggle switch for on/off settings.

import { ... } from '@corndev/ui'

HTML

No JavaScript required — these classes are the whole component.

<label class="corn-label">
  <input type="checkbox" role="switch" class="corn-switch" data-size="md" />
  Notifications
</label>

Classes

Class
`.corn-switch`

Attributes

Attribute	Values
`data-size`	`sm\|md\|lg`

Vanilla JS

Optional. createSwitch only adds and removes the classes and attributes above, so the HTML is equivalent. Reach for it when you need to change options at runtime.

import { createSwitch } from '@corndev/ui';
import '@corndev/ui/theme';

const el = document.querySelector('#target');
const instance = createSwitch(el, { /* options */ });

Options

Option	Type	Default
`disabled`	`boolean`	`false`
`size`	`'sm'\|'md'\|'lg'`	`'md'`

React

Switch — from @corndev/ui-react.

The props are the same as the options above, plus className.

A Switch is a styled checkbox with role="switch" — use it for immediate on/off settings rather than form values that submit.

Notifications

Notifications are on

Sizes

<Switch size="sm" aria-label="Small" />
<Switch size="md" aria-label="Medium" />
<Switch size="lg" aria-label="Large" />

Disabled

<Switch disabled aria-label="Wi-Fi" />
<Switch disabled aria-label="Bluetooth" defaultChecked />