Checkbox

Um controle que permite alternar entre marcado e desmarcado, mantendo o input nativo.

Instalação

O Shadwire segue o modelo open-code do shadcn/ui: o código-fonte do componente é copiado para a sua aplicação e passa a ser seu. Instale com a CLI:

shadwire add checkbox --yes

O item checkbox do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/checkbox_component.rb
app/helpers/ui/checkbox_helper.rb
vendor/shadwire/shadwire.css

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

O componente estiliza o <input type="checkbox"> nativo — semântica, foco e teclado vêm do navegador. O glifo de check vem da utility .shadwire-checkbox em shadwire.css.

<%= ui_checkbox(id: "terms") %>
<%= ui_label(for: "terms") { "Aceitar termos" } %>

Ou renderize o componente Ui::CheckboxComponent diretamente:

<%= render Ui::CheckboxComponent.new(name: "user[terms]", checked: true) %>

Exemplos

Padrão

Um checkbox nativo estilizado, associado a um ui_label via for:/id:.

Aceitar termos e condições

<div class="flex items-center gap-2">
  <%= ui_checkbox(id: "checkbox-terms") %>
  <%= ui_label(for: "checkbox-terms") { "Aceitar termos e condições" } %>
</div>

Marcado

Use checked: true para renderizar marcado; combine com textos auxiliares.

Receber novidades

Enviamos no máximo um email por semana.

<div class="flex items-start gap-2">
  <%= ui_checkbox(id: "checkbox-newsletter", checked: true, class: "mt-0.5") %>
  <div class="grid gap-1">
    <%= ui_label(for: "checkbox-newsletter") { "Receber novidades" } %>
    <p class="text-sm text-muted-foreground">Enviamos no máximo um email por semana.</p>
  </div>
</div>

Desabilitado

disabled: true desabilita o input nativo.

Indisponível no plano atual

<div class="flex items-center gap-2">
  <%= ui_checkbox(id: "checkbox-disabled", disabled: true) %>
  <%= ui_label(for: "checkbox-disabled", class: "opacity-50") { "Indisponível no plano atual" } %>
</div>

Com form_with

Use form.field_name/form.field_id. Diferente de form.check_box, não há input hidden — trate a ausência do parâmetro como desmarcado.

<%= form_with url: "#", scope: :signup do |form| %>
  <div class="flex items-center gap-2">
    <%= ui_checkbox(name: form.field_name(:terms), id: form.field_id(:terms), value: "1") %>
    <%= ui_label(for: form.field_id(:terms)) { "Li e aceito os termos" } %>
  </div>
<% end %>

Referência da API

ui_checkbox(**options) encapsula Ui::CheckboxComponent.new(**options).

Argumento	Tipo	Padrão	Descrição
`checked`	Boolean	`false`	Renderiza o input marcado.
`disabled`	Boolean	`false`	Desabilita o input nativo.
`class` / `class_name`	String	`nil`	Classes extras, mescladas após as classes base.
`**attrs`	Hash	`{}`	Atributos HTML livres (`name`, `id`, `value`, `data:`, `aria:`, …).