Checkbox

Checkboxes are used when there is a list of options and the user may select multiple options, including all or none. Each checkbox is independent of all other checkboxes in the list, and checking one box doesn't uncheck the others.

Best practices

By default, Checkboxes are unchecked.
The selection should be able by clicking on the box directly or by clicking on its label.
Labels appear to the right of checkboxes.
For lists with more than 4 options, consider using Multi-Select.

BeerChocolateIndeterminate State Example

import { Checkbox, HFlow } from '@lemonade/ui'
import React from 'react'

function CheckboxDemo() {
  return (
    <HFlow>
      <Checkbox label='Beer' />
      <Checkbox label='Chocolate' disabled />
      <Checkbox label='Indeterminate State Example' indeterminate />
    </HFlow>
  )
}

export default CheckboxDemo