Switch

On/off toggle that takes effect immediately; use Checkbox in forms that submit.

Import

import { Switch } from '@marbleui/ui'

Props

<Switch>

Prop	Type	Default
description	`ReactNode`	`—`
labelPosition	`'start' \| 'end'`	`'end'`
size	`'sm' \| 'md'`	`'md'`

Also accepts React Aria props (106).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Switch. Follow the primitive's docs for the full keyboard map.

Usage notes

On/off toggle for a setting that takes effect immediately. In a form that is submitted, use Checkbox; for a toolbar toggle use ToggleButton.

<Switch isSelected={enabled} onChange={setEnabled} description="A summary every Monday.">
  Weekly digest
</Switch>

Uncontrolled: defaultSelected. Controlled: isSelected + onChange (boolean).
size is sm or md; labelPosition="start" puts the label first, which suits settings rows.
It needs a label: pass children, or aria-label if there is no visible text.
description adds a second line under the label.

Example source · show

import { Switch } from './switch'

export const styles = {
  Default: () => (
    <div className="flex flex-col gap-3">
      <Switch defaultSelected>Airplane mode</Switch>
      <Switch size="sm">Compact</Switch>
      <Switch isDisabled>Disabled</Switch>
    </div>
  ),
  Settings: () => (
    <div className="flex w-80 flex-col divide-y divide-border rounded-lg border border-border bg-surface">
      <Switch labelPosition="start" className="p-3.5" defaultSelected description="Get notified when someone mentions you.">
        Mentions
      </Switch>
      <Switch labelPosition="start" className="p-3.5" description="A summary every Monday.">
        Weekly digest
      </Switch>
    </div>
  ),
}

Source: packages/ui/src/switch/switch.tsx

Catalog

Category: selection
Priority: Foundation
Primitive: react-aria
React Aria: Switch
Base UI: Switch