Guides
Get started Component definition Designing custom elements Development best practices
Styles
Colors Typography Spacing Shadows Radii
Components
Avatar Button Checkbox ColorPicker Dropdown FormField Icon IconButton Illustration Indicator Link List Logo Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Typeahead Toast Tooltip
Loaders
Loader LogoLoader EllipsesLoader WaveformLoader
Layout
Align Arrange Backdrop Container ErrorContainer Popover Spacer Split
Icons
Icon set
Illustrations
Illustration set
Patterns
Disabled styles Errors Forms Discovery Plan upgrade Settings
Utilities
CSS utilities CSS variables Responsive
Playground
Layout recipes Showcase

Checkbox

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

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

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

Forwarding refs

Use the ref prop to access the DOM node.

More about forwarding refs.

() => {
  const ref = useRef(null)
  const onClick = () => ref.current.checked = true
  return (
    <>
      <Spacer bottom="small">
        <Button onClick={onClick}>Toggle</Button>
      </Spacer>
      <Checkbox ref={ref} />
    </>
  )
}

() => {
  const ref = useRef(null)
  const onClick = () => ref.current.checked = true
  return (
    <>
      <Spacer bottom="small">
        <Button onClick={onClick}>Toggle</Button>
      </Spacer>
      <Checkbox ref={ref} />
    </>
  )
}

Props

name

type

default

isChecked

boolean

isIndeterminate

boolean

isDisabled

boolean

borderColor

string

onFocus

React.ReactEventHandler

onChange

React.ReactEventHandler

onBlur

React.ReactEventHandler

Guides

Styles

Components

Loaders

Layout

Icons

Illustrations

Patterns

Utilities

Playground

Checkbox

Usage

States

With label

Forwarding refs

Props