Badge

import

import { Switch } from '@bone-ui/switch'

Basic

Loading...

<Box spaceX3> <Switch /> <Switch defaultChecked /> <Switch defaultChecked /> </Box>

<Box spaceX3>
  <Switch />
  <Switch defaultChecked />
  <Switch defaultChecked />
</Box>

LIVE DEMO

Color scheme

Loading...

<Box spaceX3> <Switch colorScheme="orange400" defaultChecked /> <Switch colorScheme="teal400" defaultChecked /> <Switch colorScheme="purple400" offColorScheme="black" /> </Box>

<Box spaceX3>
  <Switch colorScheme="orange400" defaultChecked />
  <Switch colorScheme="teal400" defaultChecked />
  <Switch colorScheme="purple400" offColorScheme="black" />
</Box>

LIVE DEMO

Preset sizes

Loading...

<Box spaceX3 toCenterY> <Switch size="sm" /> <Switch size="md" /> <Switch size="lg" /> <Switch size="sm" defaultChecked /> <Switch size="md" defaultChecked /> <Switch size="lg" defaultChecked /> </Box>

<Box spaceX3 toCenterY>
  <Switch size="sm" />
  <Switch size="md" />
  <Switch size="lg" />
  <Switch size="sm" defaultChecked />
  <Switch size="md" defaultChecked />
  <Switch size="lg" defaultChecked />
</Box>

LIVE DEMO

Any sizes

Loading...

<Box toCenterY spaceX3> <Switch size={16} /> <Switch size={20} /> <Switch size={24} defaultChecked /> <Switch size={32} /> <Switch size={40} /> <Switch size={48} defaultChecked /> </Box>

<Box toCenterY spaceX3>
  <Switch size={16} />
  <Switch size={20} />
  <Switch size={24} defaultChecked />
  <Switch size={32} />
  <Switch size={40} />
  <Switch size={48} defaultChecked />
</Box>

LIVE DEMO

Aspect Ratio

Loading...

<Box spaceX3 toCenterY> <Switch size="sm" aspectRatio={1.5} /> <Switch size="md" defaultChecked aspectRatio={2} /> <Switch size="lg" aspectRatio={2.5} /> </Box>

<Box spaceX3 toCenterY>
  <Switch size="sm" aspectRatio={1.5} />
  <Switch size="md" defaultChecked aspectRatio={2} />
  <Switch size="lg" aspectRatio={2.5} />
</Box>

LIVE DEMO

Controlled

Loading...

function Demo() { const [checked, setChecked] = useState(false) return ( <Switch checked={checked} onChange={(e) => { setChecked(e.target.checked) }} /> ) }

function Demo() {
  const [checked, setChecked] = useState(false)

  return (
    <Switch
      checked={checked}
      onChange={(e) => {
        setChecked(e.target.checked)
      }}
    />
  )
}

LIVE DEMO

Witch text

Loading...

<Box spaceX3> <Switch>Open it?</Switch> </Box>

<Box spaceX3>
  <Switch>Open it?</Switch>
</Box>

LIVE DEMO

Disabled

Loading...

<Box spaceX3> <Switch colorScheme="orange400" defaultChecked disabled /> <Switch colorScheme="teal400" defaultChecked disabled /> <Switch colorScheme="purple400" disabled /> </Box>

<Box spaceX3>
  <Switch colorScheme="orange400" defaultChecked disabled />
  <Switch colorScheme="teal400" defaultChecked disabled />
  <Switch colorScheme="purple400" disabled />
</Box>

LIVE DEMO