Toggle
A button that is on or off, and toggle_group, a run of them joined into a segmented control a form submits. Native radios and checkboxes drawn as buttons, so the arrow keys move the choice and no script is needed.
Toggles
Without a name: a button whose aria-pressed the script flips. With one, a checkbox drawn as a button, submitted with the form.
<div class="flex flex-wrap items-center gap-2">
<%= toggle "Bold", icon: :pencil, pressed: true, icon_only: true %>
<%= toggle "Wrap lines" %>
<%= toggle "Show archived", name: "archived", pressed: true %>
<%= toggle "Locked", disabled: true, size: :small %>
</div>Toggle groups
One of many as radios, several with multiple: true as checkboxes. On a narrow screen the run scrolls sideways.
<div class="flex flex-col items-center gap-4">
<%= toggle_group name: "range", value: "7d", label: "Range" do |group| %>
<% group.option "24 hours", "24h" %>
<% group.option "7 days", "7d" %>
<% group.option "30 days", "30d" %>
<% group.option "Quarter", "90d", disabled: true %>
<% end %>
<%= toggle_group name: "days", value: %w[mon wed fri], multiple: true, label: "Days", size: :small do |group| %>
<% %w[Mon Tue Wed Thu Fri Sat Sun].each { |d| group.option d, d.downcase } %>
<% end %>
<%= toggle_group name: "view", value: "list", label: "View", size: :large do |group| %>
<% group.option "List", "list", icon: :list_checks %>
<% group.option "Board", "board", icon: :folder %>
<% end %>
</div>