Checkbox

A control for toggling between checked and unchecked, keeping the native input.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add checkbox --yes

The checkbox registry item installs these files:

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

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

The component styles a native <input type="checkbox">, so semantics, focus and keyboard handling come from the browser. The check mark is drawn by the .shadwire-checkbox utility in shadwire.css.

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

Or render the component Ui::CheckboxComponent directly:

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

Examples

Default

A styled native checkbox, tied to a ui_label through 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>

Checked

Use checked: true to render it checked; pair it with supporting text.

Receive product news

We send at most one email a week.

<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") { "Receive product news" } %>
    <p class="text-sm text-muted-foreground">We send at most one email a week.</p>
  </div>
</div>

Disabled

disabled: true disables the native input.

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>

With form_with

Use form.field_name/form.field_id. Unlike form.check_box, there is no hidden input, so treat a missing parameter as unchecked.

<%= 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 %>

API reference

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

Argument	Type	Default	Description
`checked`	Boolean	`false`	Renders the input checked.
`disabled`	Boolean	`false`	Disables the native input.
`class` / `class_name`	String	`nil`	Extra classes, merged after the base classes.
`**attrs`	Hash	`{}`	Free HTML attributes (`name`, `id`, `value`, `data:`, `aria:`, …).