Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de caixa de seleção

Última atualização:

Caixa de seleção Tailwind CSS somente CSS com variantes de cores primárias, secundárias, de destaque e semânticas. Tamanhos xs-xl, estado indeterminado. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes da caixa de seleção permitem aos usuários selecionar uma ou várias opções de um conjunto. Construídas com elementos de entrada HTML nativos e aprimoradas com Tailwind CSS, as caixas de seleção suportam vários tamanhos, cores e estados. Totalmente acessíveis com navegação por teclado e suporte para leitor de tela, as caixas de seleção funcionam perfeitamente em formulários, opções de filtro e interfaces de gerenciamento de permissões.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
checkboxBaseEntrada de caixa de seleção estilizada
checkbox-circleEstiloCaixa de seleção totalmente circular
checkbox-roundedEstiloCaixa de seleção moderadamente arredondada
checkbox-squareEstiloCaixa de seleção quadrada sem arredondamento
checkbox-disabledModificadorAparência desativada para elementos sem entrada
checkbox-xsTamanhoExtra pequeno
checkbox-smTamanhoPequeno
checkbox-mdTamanhoMédio (padrão)
checkbox-lgTamanhoGrande
checkbox-xlTamanhoExtra grande
checkbox-2xlTamanho2× extra grande
checkbox-primaryCorCor do tema principal
checkbox-secondaryCorCor do tema secundário
checkbox-accentCorCor do tema de destaque
checkbox-neutralCorCor neutra do tema
checkbox-infoCorCor semântica da informação
checkbox-successCorCor semântica de sucesso
checkbox-warningCorCor semântica de aviso
checkbox-errorCorCor semântica do erro

Uso Básico

<input type="checkbox" checked="checked" class="checkbox">

<input type="checkbox" checked="checked" className="checkbox">

Tamanhos de caixa de seleção

html 
1
2
3
4
5
6
<input type="checkbox" checked="checked" class="checkbox checkbox-xs">
<input type="checkbox" checked="checked" class="checkbox checkbox-sm">
<input type="checkbox" checked="checked" class="checkbox checkbox-md">
<input type="checkbox" checked="checked" class="checkbox checkbox-lg">
<input type="checkbox" checked="checked" class="checkbox checkbox-xl">
<input type="checkbox" checked="checked" class="checkbox checkbox-2xl">

Cores da caixa de seleção

html 
1
2
3
4
5
6
7
8
9
<input type="checkbox" checked="checked" class="checkbox">
<input type="checkbox" checked="checked" class="checkbox checkbox-primary">
<input type="checkbox" checked="checked" class="checkbox checkbox-secondary">
<input type="checkbox" checked="checked" class="checkbox checkbox-accent">
<input type="checkbox" checked="checked" class="checkbox checkbox-info">
<input type="checkbox" checked="checked" class="checkbox checkbox-success">
<input type="checkbox" checked="checked" class="checkbox checkbox-warning">
<input type="checkbox" checked="checked" class="checkbox checkbox-error">
<input type="checkbox" checked="checked" class="checkbox checkbox-neutral">

Caixas de seleção desativadas

html 
1
2
<input type="checkbox" class="checkbox" disabled="">
<input type="checkbox" class="checkbox" disabled="" checked="checked">

Formas de caixa de seleção

Caixa de seleção quadrada

html 
<input type="checkbox" class="checkbox checkbox-square" checked="checked">

Caixa de seleção Círculo/Arredondado

As classes checkbox-circle e checkbox-rounded resultam no mesmo estilo visual, permitindo convenções de nomenclatura flexíveis.

html 
1
2
<input type="checkbox" class="checkbox checkbox-circle" checked="checked">
<input type="checkbox" class="checkbox checkbox-rounded" checked="checked">

Caixas de seleção com rótulos

html 
1
2
<input type="checkbox" class="checkbox checkbox-circle checkbox-sm" id="newsletter" name="newsletter" checked="checked">
<label for="newsletter">Subscribe to our newsletter</label>

Usando Claude Code, Cursor ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Caixa de seleção e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP