Switch

Switch turns something on or off straight away, such as “Clock in” or “Dark mode”. For a value that is saved together with a form, use Checkbox.

import { Switch } from '@beyul/sulmu-ui'

Source · Figma

Examples

States

OffOnDisabledDisabled on

import { Flex, Switch } from '@beyul/sulmu-ui'

export default function Example() {
  return (
    <Flex gap={4} align="center" wrap>
      <Switch>Off</Switch>
      <Switch defaultChecked>On</Switch>
      <Switch disabled>Disabled</Switch>
      <Switch disabled defaultChecked>
        Disabled on
      </Switch>
    </Flex>
  )
}

Controlled

Clock in

You are clocked out.

import { Stack, Switch, Text } from '@beyul/sulmu-ui'
import { useState } from 'react'

export default function Example() {
  const [on, setOn] = useState(false)
  return (
    <Stack gap={2}>
      <Switch checked={on} onCheckedChange={(d) => setOn(d.checked)}>
        Clock in
      </Switch>
      <Text textStyle="caption" tone="subtle">
        {on ? 'You are clocked in.' : 'You are clocked out.'}
      </Text>
    </Stack>
  )
}

Props

Prop	Type	Default	Description
children	ReactNode	-	Label text. Without it, pass aria-label.
defaultChecked	boolean	-
value	string | number	-	The value of switch input. Useful for form submission.
name	string	-	The name of the input field in a switch (Useful for form submission).
disabled	boolean	-	Whether the switch is disabled.
checked	boolean	-	The controlled checked state of the switch
onCheckedChange	((details: CheckedChangeDetails) => void)	-	Function to call when the switch is clicked.

The remaining props of Ark UI’s Switch.Root are accepted too.

Accessibility and usage

• The root element is a <label>; clicking the text toggles the switch.
• Without children, pass aria-label, as the Top Bar example does.