Checkbox
Caixa de seleção de 16px para escolhas independentes (aceitar termos, filtros). Estados marcado, desmarcado, indeterminado, desabilitado e inválido.
Exemplos
Interaja com o componente e copie o código de cada exemplo.
Básico, com descrição e desabilitado
Avisamos sobre novos cursos e simulados.
import { Checkbox } from "@t2-educacao/midas";Uso
<div className="flex items-center gap-2">
<Checkbox id="termos" />
<Label htmlFor="termos">Aceito os termos de uso</Label>
</div>Props
Aceita as props do Checkbox do Radix:
| Prop | Tipo | Descrição |
|---|---|---|
checked / defaultChecked | boolean | "indeterminate" | Estado controlado / inicial |
onCheckedChange | (checked) => void | Chamado ao mudar |
disabled | boolean | Desabilita |
required / name / value | Para formulários |
Exemplos
Com descrição (Field horizontal)
<Field orientation="horizontal" className="items-start">
<Checkbox id="novidades" defaultChecked />
<div className="grid gap-1">
<FieldLabel htmlFor="novidades">Receber novidades</FieldLabel>
<FieldDescription>Avisamos sobre novos cursos e simulados.</FieldDescription>
</div>
</Field>Indeterminado ("selecionar todos")
<Checkbox checked="indeterminate" aria-label="Selecionar todas as aulas" />Acessibilidade
- Use
Label htmlFor: clicar no texto marca a caixa. Espaçomarca e desmarca.
Não faça
- Usar Checkbox para escolha única: use RadioGroup.
- Usar Checkbox para ligar/desligar algo na hora: use Toggle.
Carousel
Carrossel com arraste, setas e teclado (embla). Itens de qualquer tamanho (basis-*), espaçamento ajustável, orientação horizontal ou vertical, plugins e API para ler o slide atual.
Combobox
Campo de seleção com busca. Passe options e ele cuida de filtrar, navegar pelo teclado e selecionar. Seleção única ou múltipla (chips), botão de limpar, grupos, itens com descrição e ícone, ícone à esquerda, modo popup (botão com busca), estados inválido e desabilitado.