Checkbox

Checkbox, ou caixa de seleção, é utilizado quando há uma lista de opções e o usuário pode selecionar múltiplas escolhas, incluindo todas ou nenhuma delas. Cada checkbox é independente de todos os outros na lista, então selecionar um checkbox não implica no status dos outros itens.

Boas práticas

Por padrão, os checkboxes não vem selecionados.
A seleção deve acontecer tanto pelo clique diretamente na caixa ou pelo clique na label.
As labels devem ser posicionadas à direita da caixa de seleção.
Para listas com mais de 4 opções, considere utilizar o 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