Checkbox

Componente de checkbox para selecionar múltiplas opções com vários estilos e suporte a grupo.

Importação

import { Checkbox } from 'asterui'

Exemplos

Uso Básico

Checkbox simples com rótulo.

Accept terms and conditions

import { Checkbox } from 'asterui'

function App() {
  return (
      <Checkbox>Accept terms and conditions</Checkbox>
    )
}

export default App

Cores

Diferentes cores de checkbox para vários contextos.

import { Checkbox, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="sm">
        <Checkbox color="primary" defaultChecked>Primary</Checkbox>
        <Checkbox color="secondary" defaultChecked>Secondary</Checkbox>
        <Checkbox color="accent" defaultChecked>Accent</Checkbox>
        <Checkbox color="success" defaultChecked>Success</Checkbox>
        <Checkbox color="warning" defaultChecked>Warning</Checkbox>
        <Checkbox color="info" defaultChecked>Info</Checkbox>
        <Checkbox color="error" defaultChecked>Error</Checkbox>
      </Space>
    )
}

export default App

Tamanhos

Cinco tamanhos de checkbox de xs a xl.

import { Checkbox, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md" align="center">
        <Checkbox size="xs" defaultChecked>XS</Checkbox>
        <Checkbox size="sm" defaultChecked>SM</Checkbox>
        <Checkbox size="md" defaultChecked>MD</Checkbox>
        <Checkbox size="lg" defaultChecked>LG</Checkbox>
        <Checkbox size="xl" defaultChecked>XL</Checkbox>
      </Space>
    )
}

export default App

Desabilitado

Estados de checkbox desabilitado.

DisabledDisabled Checked

import { Checkbox, Space } from 'asterui'

function App() {
  return (
      <Space direction="horizontal" size="md">
        <Checkbox disabled>Disabled</Checkbox>
        <Checkbox disabled defaultChecked>Disabled Checked</Checkbox>
      </Space>
    )
}

export default App

Indeterminado

Estado indeterminado para funcionalidade de marcar-tudo.

Select All

Item 1Item 2Item 3

import { Checkbox, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [items, setItems] = useState([true, false, true])
  const allChecked = items.every(Boolean)
  const someChecked = items.some(Boolean) && !allChecked
  
  const handleSelectAll = () => {
    setItems(allChecked ? [false, false, false] : [true, true, true])
  }
  
  return (
      <Space direction="vertical" size="sm">
        <Checkbox
          checked={allChecked}
          indeterminate={someChecked}
          onChange={handleSelectAll}
          className="font-medium"
        >
          Select All
        </Checkbox>
        <div className="ml-6">
          <Space direction="vertical" size="xs">
            {['Item 1', 'Item 2', 'Item 3'].map((item, i) => (
              <Checkbox
                key={i}
                checked={items[i]}
                onChange={() => {
                  const newItems = [...items]
                  newItems[i] = !newItems[i]
                  setItems(newItems)
                }}
              >
                {item}
              </Checkbox>
            ))}
          </Space>
        </div>
      </Space>
    )
}

export default App

Grupo de Checkbox

Agrupar múltiplos checkboxes com estado compartilhado.

AppleBananaOrangeMango

import { Checkbox, Modal } from 'asterui'

function App() {
  const options = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Orange', value: 'orange' },
    { label: 'Mango', value: 'mango' },
  ]
  
  return (
      <Checkbox.Group
        options={options}
        defaultValue={['apple', 'orange']}
        onChange={(values) => Modal.info({ title: 'Selected', content: values.join(', ') })}
      />
    )
}

export default App

Grupo com Opções

Gerar checkboxes de array de opções com suporte para desabilitados.

ReadWriteDelete

import { Checkbox } from 'asterui'

function App() {
  const options = [
    { label: 'Read', value: 'read' },
    { label: 'Write', value: 'write' },
    { label: 'Delete', value: 'delete', disabled: true },
  ]
  
  return (
      <Checkbox.Group
        options={options}
        defaultValue={['read']}
      />
    )
}

export default App

Direção do Grupo

Layouts de grupo horizontal e vertical.

import { Checkbox, Space } from 'asterui'

function App() {
  const options = ['Option A', 'Option B', 'Option C']
  
  return (
      <Space direction="vertical" size="lg">
        <div>
          <p className="text-sm font-medium mb-2">Horizontal (default)</p>
          <Checkbox.Group options={options} direction="horizontal" defaultValue={['Option A']} />
        </div>
        <div>
          <p className="text-sm font-medium mb-2">Vertical</p>
          <Checkbox.Group options={options} direction="vertical" defaultValue={['Option B']} />
        </div>
      </Space>
    )
}

export default App

Controlado

Checkbox controlado com gerenciamento de estado externo.

Controlled checkbox

Checked: No

import { Checkbox, Space } from 'asterui'
import { useState } from 'react'

function App() {
  const [checked, setChecked] = useState(false)
  
  return (
      <Space direction="vertical" size="sm">
        <Checkbox
          checked={checked}
          onChange={(e) => setChecked(e.target.checked)}
        >
          Controlled checkbox
        </Checkbox>
        <p className="text-sm text-base-content/70">
          Checked: {checked ? 'Yes' : 'No'}
        </p>
      </Space>
    )
}

export default App

Modo Swap

Alternar entre dois estados visuais com efeitos de animação.

😀

😴

OFF

import { Checkbox, Space } from 'asterui'
import { SpeakerWaveIcon, SpeakerXMarkIcon } from '@aster-ui/icons/solid'
import { useState } from 'react'

function App() {
  const [volume, setVolume] = useState(true)
  
  return (
      <Space size="lg">
        <Checkbox
          checked={volume}
          onChange={(e) => setVolume(e.target.checked)}
          swap={{
            on: <SpeakerWaveIcon size={32} />,
            off: <SpeakerXMarkIcon size={32} />,
          }}
        />
        <Checkbox
          swap={{
            on: <span className="text-2xl">😀</span>,
            off: <span className="text-2xl">😴</span>,
            effect: 'rotate',
          }}
        />
        <Checkbox
          swap={{
            on: <span className="text-xl font-bold text-success">ON</span>,
            off: <span className="text-xl font-bold text-error">OFF</span>,
            effect: 'flip',
          }}
        />
      </Space>
    )
}

export default App

API

`Checkbox`

Propriedade	Descrição	Tipo	Padrão
`checked`	Estado marcado controlado	`boolean`	-
`defaultChecked`	Estado marcado padrão	`boolean`	-
`disabled`	Desabilitar o checkbox	`boolean`	`false`
`indeterminate`	Estado indeterminado (seleção parcial)	`boolean`	`false`
`size`	Tamanho do checkbox	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	-
`color`	Cor do checkbox	`'primary' \| 'secondary' \| 'accent' \| 'neutral' \| 'success' \| 'warning' \| 'info' \| 'error'`	-
`swap`	Configuração do modo swap	`CheckboxSwapConfig`	-
`value`	Valor quando usado em um grupo	`string \| number`	-
`onChange`	Handler de evento de mudança	`(e: ChangeEvent) => void`	-
`name`	Atributo name HTML para o input	`string`	-
`autoFocus`	Foco automático ao montar	`boolean`	`false`
`className`	Classes CSS adicionais	`string`	-
`children`	Conteúdo do rótulo (automaticamente envolvido em elemento label)	`ReactNode`	-

`Checkbox.Group`

Propriedade	Descrição	Tipo	Padrão
`value`	Valores selecionados controlados	`(string \| number)[]`	-
`defaultValue`	Valores selecionados padrão	`(string \| number)[]`	-
`onChange`	Callback de mudança de seleção	`(values: (string \| number)[]) => void`	-
`disabled`	Desabilitar todos os checkboxes	`boolean`	`false`
`options`	Opções de checkbox	`(string \| number \| CheckboxOptionType)[]`	-
`direction`	Direção do layout	`'horizontal' \| 'vertical'`	`'vertical'`
`name`	Atributo name HTML para todos os checkboxes (para envio de formulário)	`string`	-
`children`	Elementos de checkbox manuais	`ReactNode`	-

`CheckboxSwapConfig`

Propriedade	Descrição	Tipo	Padrão
`on`	Conteúdo mostrado quando marcado	`ReactNode`	-
`off`	Conteúdo mostrado quando desmarcado	`ReactNode`	-
`effect`	Efeito de animação	`'rotate' \| 'flip'`	-

`CheckboxOptionType`

Propriedade	Descrição	Tipo	Padrão
`label`	Rótulo da opção	`ReactNode`	-
`value`	Valor da opção	`string \| number`	-
`disabled`	Desabilitar esta opção	`boolean`	`false`

Acessibilidade

Usa input de checkbox nativo para suporte de teclado e leitor de tela
Associa adequadamente rótulos com checkboxes
Estado indeterminado é comunicado via propriedade indeterminate nativa
Estado desabilitado previne interação e é comunicado para tecnologias assistivas
Estados de foco são visíveis para navegação por teclado