Blocks

Checkbox

A native <input type=checkbox> styled with appearance-none + a checked background SVG. Works with form submissions and Rails check_box_tag.

Installation

bin/rails g shadcnrb:component checkbox

Usage

Accept the terms and conditions

<%= sui.layout.row gap: 2 do %>
  <%= sui.checkbox id: "terms", name: "terms" %>
  <%= sui.label "Accept the terms and conditions", for: "terms" %>
<% end %>

Email notifications

SMS notifications

Push notifications (disabled)

<%= sui.layout.stack gap: 2 do %>
  <%= sui.layout.row gap: 2 do %>
    <%= sui.checkbox id: "email", name: "email", checked: true %>
    <%= sui.label "Email notifications", for: "email" %>
  <% end %>
  <%= sui.layout.row gap: 2 do %>
    <%= sui.checkbox id: "sms", name: "sms" %>
    <%= sui.label "SMS notifications", for: "sms" %>
  <% end %>
  <%= sui.layout.row gap: 2 do %>
    <%= sui.checkbox id: "push", name: "push", disabled: true %>
    <%= sui.label "Push notifications (disabled)", for: "push" %>
  <% end %>
<% end %>