Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

CSS utilities
CSS variables

Checkbox

Usage Guidelines

Usage

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

States

Use isChecked to check the checkbox.
Use isDisabled to disable the checkbox.
Use isIndeterminate for indeterminate checkbox.

<Distribute gap="medium">
  <Checkbox />
  <Checkbox isChecked onChange={() => console.log()} />
  <Checkbox isIndeterminate onChange={() => console.log()} />
  <Checkbox isDisabled />
  <Checkbox isDisabled isChecked />
  <Checkbox isDisabled isIndeterminate />
</Distribute>

<Distribute gap="medium">
  <Checkbox />
  <Checkbox isChecked onChange={() => console.log()} />
  <Checkbox isIndeterminate onChange={() => console.log()} />
  <Checkbox isDisabled />
  <Checkbox isDisabled isChecked />
  <Checkbox isDisabled isIndeterminate />
</Distribute>

With label

Choose this

<Distribute gap="small" alignment='center'>
  <Checkbox id='exampleCheckboxId' />
  <label htmlFor='exampleCheckboxId'>Choose this</label>
</Distribute>

<Distribute gap="small" alignment='center'>
  <Checkbox id='exampleCheckboxId' />
  <label htmlFor='exampleCheckboxId'>Choose this</label>
</Distribute>

Props

prop

type

default

required

isChecked

bool

isIndeterminate

bool

isDisabled

bool

onFocus

func

onChange

func

onBlur

func