Switch

Basic

It receives the same props as controlled inputs, such as checked and onChange.


import React from 'react'
import { Switch, Boxer } from '@smooth-ui/core-sc'

function Example() {
  const [checked, setChecked] = React.useState(false)
  const toggle = () => setChecked(!checked)
  return <Switch checked={checked} onChange={toggle} />
}

render(<Example />)import React from 'react'
import { Switch, Boxer } from '@smooth-ui/core-sc'
function Example() {
  const [checked, setChecked] = React.useState(false)
  const toggle = () => setChecked(!checked)
  return <Switch checked={checked} onChange={toggle} />
}
render(<Example />)

useCheckboxState

A Switch acts as a checkbox, so useCheckboxState is usable exactly like on a Checkbox.


import React from 'react'
import { Switch, useCheckboxState } from '@smooth-ui/core-sc'

function Example() {
  const checkbox = useCheckboxState()
  return <Switch {...checkbox} />
}

render(<Example />)import React from 'react'
import { Switch, useCheckboxState } from '@smooth-ui/core-sc'
function Example() {
  const checkbox = useCheckboxState()
  return <Switch {...checkbox} />
}
render(<Example />)

Sizes

Set scales using scale prop like "xs", "sm", "lg" or "xl". The default scale is "base".


Extra small
Small
Base (default)
Large
Extra large
import React from 'react'
import {
  Switch,
  useCheckboxState,
  FormCheck,
  FormCheckLabel,
  Boxer,
} from '@smooth-ui/core-sc'

function Example() {
  const checkbox = useCheckboxState()
  return (
    <Boxer my={3}>
      <FormCheck>
        <Switch {...checkbox} scale="xs" name="xs" />
        <FormCheckLabel scale="xs" name="xs">
          Extra small
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Switch {...checkbox} scale="sm" name="sm" />
        <FormCheckLabel scale="sm" name="sm">
          Small
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Switch {...checkbox} scale="base" name="base" />
        <FormCheckLabel scale="base" name="base">
          Base (default)
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Switch {...checkbox} scale="lg" name="lg" />
        <FormCheckLabel scale="lg" name="lg">
          Large
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Switch {...checkbox} scale="xl" name="xl" />
        <FormCheckLabel scale="xl" name="xl">
          Extra large
        </FormCheckLabel>
      </FormCheck>
    </Boxer>
  )
}

render(<Example />)import React from 'react'
import {
  Switch,
  useCheckboxState,
  FormCheck,
  FormCheckLabel,
  Boxer,
} from '@smooth-ui/core-sc'
function Example() {
  const checkbox = useCheckboxState()
  return (
    <Boxer my={3}>
      <FormCheck>
        <Switch {...checkbox} scale="xs" name="xs" />
        <FormCheckLabel scale="xs" name="xs">
          Extra small
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Switch {...checkbox} scale="sm" name="sm" />
        <FormCheckLabel scale="sm" name="sm">
          Small
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Switch {...checkbox} scale="base" name="base" />
        <FormCheckLabel scale="base" name="base">
          Base (default)
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Switch {...checkbox} scale="lg" name="lg" />
        <FormCheckLabel scale="lg" name="lg">
          Large
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Switch {...checkbox} scale="xl" name="xl" />
        <FormCheckLabel scale="xl" name="xl">
          Extra large
        </FormCheckLabel>
      </FormCheck>
    </Boxer>
  )
}
render(<Example />)

Disabled

Disable using disabled prop.


import React from 'react'
import { Switch, useCheckboxState } from '@smooth-ui/core-sc'

function Example() {
  const checkbox = useCheckboxState({ state: true })
  return <Switch {...checkbox} disabled />
}

render(<Example />)import React from 'react'
import { Switch, useCheckboxState } from '@smooth-ui/core-sc'
function Example() {
  const checkbox = useCheckboxState({ state: true })
  return <Switch {...checkbox} disabled />
}
render(<Example />)

With labels

Add labels using labeled props. Set custom labels using labelOn and labelOff.

ON
OFF
I
O
import React from 'react'
import { Switch, Boxer, useCheckboxState } from '@smooth-ui/core-sc'

function Example() {
  const checkbox = useCheckboxState()
  return (
    <Boxer my={1}>
      <Switch {...checkbox} labeled />
      <Switch {...checkbox} labeled onLabel="I" offLabel="O" />
    </Boxer>
  )
}

render(<Example />)import React from 'react'
import { Switch, Boxer, useCheckboxState } from '@smooth-ui/core-sc'
function Example() {
  const checkbox = useCheckboxState()
  return (
    <Boxer my={1}>
      <Switch {...checkbox} labeled />
      <Switch {...checkbox} labeled onLabel="I" offLabel="O" />
    </Boxer>
  )
}
render(<Example />)

Accessibility

Switch uses Reakit Checkbox under the hood, it means it follows WAI-ARIA Checkbox Pattern.

API

useCheckboxState

See Reakit documentation.

Switch

Property	Type	Required	Default	Description
checked	boolean	false	-	Checkbox's checked state. If present, it's used instead of state.
disabled	boolean	false	-	Same as the HTML attribute.
focusable	boolean	false	-	When an element is `disabled`, it may still be `focusable`. It works similarly to `readOnly` on form elements. In this case, only `aria-disabled` will be set.
onChange	function	false	-	Same as the "checkbox" `onChange` prop.
scale	enum	false	base	Control the size of the component.
Show xstyled properties

Switch also includes a bunch of state properties, see Reakit documentation.

Smooth UI

Switch

Basic

useCheckboxState

Sizes

Disabled

With labels

Accessibility

API

useCheckboxState

Switch