shadcn-rails

Checkbox

A control that allows the user to toggle between checked and not checked.

No JavaScript Required
checkbox/default 
<div class="flex items-center space-x-2">
  <%= render Shadcn::CheckboxComponent.new(id: "default-check") %>
  <%= render Shadcn::LabelComponent.new(for: "default-check") { "Default checkbox" } %>
</div>

Installation

Add the component to your project:

rails generate shadcn:add checkbox

Usage

<div class="flex items-center space-x-2">
  <%= render Shadcn::CheckboxComponent.new(id: "default-check") %>
  <%= render Shadcn::LabelComponent.new(for: "default-check") { "Default checkbox" } %>
</div>

Examples

Default

<div class="flex items-center space-x-2">
  <%= render Shadcn::CheckboxComponent.new(id: "default-check") %>
  <%= render Shadcn::LabelComponent.new(for: "default-check") { "Default checkbox" } %>
</div>

Checked

Set checked: true to render in the checked state.

<div class="flex items-center space-x-2">
  <%= render Shadcn::CheckboxComponent.new(id: "checked-check", checked: true) %>
  <%= render Shadcn::LabelComponent.new(for: "checked-check") { "Checked by default" } %>
</div>

Disabled

<div class="flex flex-col gap-4">
  <div class="flex items-center space-x-2">
    <%= render Shadcn::CheckboxComponent.new(id: "disabled-unchecked", disabled: true) %>
    <%= render Shadcn::LabelComponent.new(for: "disabled-unchecked") { "Disabled unchecked" } %>
  </div>
  <div class="flex items-center space-x-2">
    <%= render Shadcn::CheckboxComponent.new(id: "disabled-checked", disabled: true, checked: true) %>
    <%= render Shadcn::LabelComponent.new(for: "disabled-checked") { "Disabled checked" } %>
  </div>
</div>

With Description

You agree to our Terms of Service and Privacy Policy.

<div class="items-top flex space-x-2">
  <%= render Shadcn::CheckboxComponent.new(id: "terms-desc") %>
  <div class="grid gap-1.5 leading-none">
    <%= render Shadcn::LabelComponent.new(for: "terms-desc") { "Accept terms and conditions" } %>
    <p class="text-sm text-muted-foreground">You agree to our Terms of Service and Privacy Policy.</p>
  </div>
</div>

In a Form

<div class="space-y-4 max-w-md">
  <div class="flex items-center space-x-2">
    <%= render Shadcn::CheckboxComponent.new(id: "marketing", name: "preferences[marketing]") %>
    <%= render Shadcn::LabelComponent.new(for: "marketing") { "Receive marketing emails" } %>
  </div>
  <div class="flex items-center space-x-2">
    <%= render Shadcn::CheckboxComponent.new(id: "updates", name: "preferences[updates]", checked: true) %>
    <%= render Shadcn::LabelComponent.new(for: "updates") { "Receive product updates" } %>
  </div>
  <div class="flex items-center space-x-2">
    <%= render Shadcn::CheckboxComponent.new(id: "security", name: "preferences[security]", checked: true) %>
    <%= render Shadcn::LabelComponent.new(for: "security") { "Receive security alerts" } %>
  </div>
</div>

Disabled & Checked

checkbox/disabled_checked 
<%= render Shadcn::CheckboxComponent.new(name: "locked_checked", id: "locked_checked", checked: true, disabled: true) %>

Multiple Checkboxes

checkbox/multiple 
<%= render Shadcn::CheckboxComponent.new(name: "interests[]", id: "design", value: "design", checked: true) %>

API Reference

API Reference

Prop Type Default Description
name String nil Input name attribute
id String nil Input id attribute
value String "1" Value when checked
checked Boolean false Whether the checkbox is checked
disabled Boolean false Whether the checkbox is disabled
required Boolean false Whether the checkbox is required
unchecked_value String "0" Hidden value submitted when unchecked
include_hidden Boolean true Whether to render the hidden unchecked value input

Accessibility

  • Renders a native <input type="checkbox"> for built-in keyboard and screen reader behavior
  • Supports standard HTML attributes like checked, disabled, and required
  • Always pair with a LabelComponent for accessibility
  • Disabled state is properly announced to screen readers