Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

Playground

Layout recipes
Showcase

Switch

Usage Guidelines

Usage

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

States

Use isActive to enable the Switch.
Use isDisabled to disable the Switch.

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

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

With label

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

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

Props

name

type

default

isActive

boolean

isDisabled

boolean

onChange

React.ReactEventHandler