Guides

Styles

import { Switch } from '@loomhq/lens'
<Switch />

<Arrange gap="small">
  <Switch size="medium" />
  <Switch size="large" />
</Arrange>

<Arrange gap="small">
  <Switch size="medium" />
  <Switch size="large" />
</Arrange>

<Arrange gap="small">
  <Switch />
  <Switch isActive />
  <Switch isDisabled />
  <Switch isActive isDisabled />
</Arrange>

<Arrange gap="small">
  <Switch />
  <Switch isActive />
  <Switch isDisabled />
  <Switch isActive isDisabled />
</Arrange>

<FormField
  direction="row"
  label="Turn ON"
  labelFor="exampleSwitch"
>
  <Switch id="exampleSwitch" />
</FormField>

<FormField
  direction="row"
  label="Turn ON"
  labelFor="exampleSwitch"
>
  <Switch id="exampleSwitch" />
</FormField>

name

type

default

size

'medium' | 'large'

'medium'

isActive

boolean

isDisabled

boolean

onChange

React.ReactEventHandler

ariaLabelledby

string

ariaLabel

string