shadcn-rails

Checkbox

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

Stimulus: shadcn--checkbox

Installation

Add the component to your project:

rails generate shadcn:component checkbox

Usage

<div class="flex items-center space-x-2">
  <%= render Shadcn::CheckboxComponent.new(id: "terms") %>
  <%= render Shadcn::LabelComponent.new(for: "terms") { "Accept terms and conditions" } %>
</div>

Examples

Default

Checked

Set checked: true to render in the checked state.

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

Disabled

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

Indeterminate

Use indeterminate: true for a partial selection state.

With Description

You agree to our Terms of Service and Privacy Policy.

In a Form

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
indeterminate Boolean false Whether to show indeterminate (partial) state

Stimulus Controller

This component requires JavaScript. The Stimulus controller docs provides interactivity.

Handles checkbox toggle state and updates form values.

Installation

Add to your config/importmap.rb:

pin "shadcn-rails", to: "shadcn/index.js"

Then in your app/javascript/controllers/index.js:

import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn-rails"

const application = Application.start()
registerShadcnControllers(application)

Or import just this controller:

import DocsController from "shadcn-rails/controllers/docs_controller"

application.register("docs", DocsController)

Values

Name Type Default Description
checked Boolean Current checked state
name String Form input name for submission

Actions

Action Description
toggle Toggles the checked state

TypeScript

Type definitions are included. Import types as needed: 

import type { DocsController } from "shadcn-rails"

Accessibility

  • Uses role="checkbox" for proper accessibility
  • Has aria-checked attribute that reflects current state
  • Supports aria-checked="mixed" for indeterminate state
  • Always pair with a LabelComponent for accessibility
  • Disabled state is properly announced to screen readers