Checkbox

Um controle para marcar e desmarcar uma opção, feito sobre o input nativo.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app 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, então semântica, foco e teclado ficam por conta do navegador. O sinal de marcado é desenhado pelo utilitário .shadwire-checkbox do shadwire.css.

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

Ou renderize o componente Ui::CheckboxComponent diretamente:

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

Exemplos

Padrão

Um checkbox nativo estilizado, ligado a um ui_label por for:/id:.

Accept the terms and conditions

<div class="flex items-center gap-2">
  <%= ui_checkbox(id: "checkbox-terms") %>
  <%= ui_label(for: "checkbox-terms") { "Accept the terms and conditions" } %>
</div>

Marcado

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

Receber novidades do produto

Enviamos no máximo um e-mail 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 do produto" } %>
    <p class="text-sm text-muted-foreground">Enviamos no máximo um e-mail por semana.</p>
  </div>
</div>

Desabilitado

disabled: true desabilita o input nativo.

Not available on your current plan

<div class="flex items-center gap-2">
  <%= ui_checkbox(id: "checkbox-disabled", disabled: true) %>
  <%= ui_label(for: "checkbox-disabled", class: "opacity-50") { "Not available on your current plan" } %>
</div>

Com form_with

Use form.field_name/form.field_id. Ao contrário do form.check_box, não há input hidden, então 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)) { "Accept terms and conditions" } %>
  </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:`, …).