Guides

Styles

Components

Layout

Icons

Icon set

Illustrations

Illustration set

Patterns

Utilities

Playground

Layout recipes
Showcase

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.

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

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

With label

Choose me

<FormField
  direction="row"
  label="Choose me"
  labelFor="exampleCheckboxId"
>
  <Checkbox id="exampleCheckboxId" />
</FormField>

<FormField
  direction="row"
  label="Choose me"
  labelFor="exampleCheckboxId"
>
  <Checkbox id="exampleCheckboxId" />
</FormField>

Props

prop

type

default

isChecked

bool

isIndeterminate

bool

isDisabled

bool

onFocus

func

onChange

func

onBlur

func