Switch

Turns a setting on or off, with an immediate effect. For choices that are saved later, as part of a form, use a Checkbox.

Published

Switch.tsx

import {Switch} from 'alinea/components'

export function SwitchExample() {
  return <Switch defaultChecked>Published</Switch>
}

States

Show prices incl. VATFree shippingGift cardsMaintenance mode

SwitchStates.tsx

import {Switch} from 'alinea/components'

export function SwitchStatesExample() {
  return (
    <div style={{display: 'grid', gap: 16, width: 280}}>
      <Switch>Show prices incl. VAT</Switch>
      <Switch defaultChecked>Free shipping</Switch>
      <Switch disabled>Gift cards</Switch>
      <Switch defaultChecked readOnly>
        Maintenance mode
      </Switch>
    </div>
  )
}

Props

PropTypeDefaultDescription

checkedbooleanDefault –

defaultCheckedbooleanDefault –

onCheckedChange(checked: boolean) => voidDefault –

disabledbooleanDefault –

readOnlybooleanDefault –

namestringDefault –

valuestringDefault –

autoFocusbooleanDefault –

refRef<HTMLLabelElement>Default –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

Accessibility

Announced as a switch with its on or off state. Space toggles it and clicking the label does too.