Radio Button

Basic Usage

Radio button group with a collection of options. Use the positional first argument for clean, Rails-like syntax.

Post Status

Draft

Published

Archived

Select the current status

Basic Usage

<%# Recommended: Positional syntax %>
<%= rui_radio_button(:status,
  collection: [["Draft", "draft"], ["Published", "published"], ["Archived", "archived"]],
  label: "Post Status",
  help_text: "Select the current status",
  color: :primary
) %>

New in v0.15.0: The positional syntax rui_radio_button(:name, collection: ...) is now supported for cleaner standalone usage. Old keyword syntax object: :post, method: :status still works for backward compatibility.

Colors

Supports all Tailwind colors via ColorBuilderHelper - semantic colors plus any Tailwind color.

Semantic Colors

Primary

Option A

Option B

Success

Option A

Option B

Warning

Option A

Option B

Danger

Option A

Option B

Info

Option A

Option B

Secondary

Option A

Option B

Semantic Colors

<%= rui_radio_button(object: :demo, method: :opt, collection: options, color: :primary, selected: "a") %>
<%= rui_radio_button(object: :demo, method: :opt, collection: options, color: :success, selected: "a") %>
<%= rui_radio_button(object: :demo, method: :opt, collection: options, color: :danger, selected: "a") %>

Tailwind Colors

Use any Tailwind color directly - indigo, pink, violet, teal, and more!

Indigo

B

Pink

B

Violet

B

Teal

B

Rose

B

Emerald

B

Amber

B

Cyan

B

Tailwind Colors

<%= rui_radio_button(object: :tw, method: :opt, collection: options, color: :indigo, selected: "a") %>
<%= rui_radio_button(object: :tw, method: :opt, collection: options, color: :pink, selected: "a") %>
<%= rui_radio_button(object: :tw, method: :opt, collection: options, color: :violet, selected: "a") %>

Sizes

Five size options from extra small to extra large.

Extra Small (xs)

Option B

Small (sm)

Option B

Base (default)

Option B

Large (lg)

Option B

Extra Large (xl)

Option B

Sizes

<%= rui_radio_button(object: :demo, method: :opt, collection: options, size: :xs) %>
<%= rui_radio_button(object: :demo, method: :opt, collection: options, size: :sm) %>
<%= rui_radio_button(object: :demo, method: :opt, collection: options, size: :base) %>
<%= rui_radio_button(object: :demo, method: :opt, collection: options, size: :lg) %>
<%= rui_radio_button(object: :demo, method: :opt, collection: options, size: :xl) %>

Card Variant

Bordered cards with full-width click targets. Perfect for pricing plans, subscription tiers, or feature selection.

Select Plan

Basic

For individuals getting started

Pro

For growing teams

Enterprise

Custom solutions for large orgs

Card Variant

<%= rui_radio_button(
  object: :subscription,
  method: :plan,
  collection: [
    ["Basic", "basic", "For individuals getting started"],
    ["Pro", "pro", "For growing teams"],
    ["Enterprise", "enterprise", "Custom solutions for large orgs"]
  ],
  variant: :card,
  description_method: 2,
  label: "Select Plan",
  color: :primary,
  selected: "pro"
) %>

Card Colors

Indigo Plan

Other

Success Plan

Other

Pill Variant

Compact, tag-like selections. Perfect for filters, categories, or quick selections.

DayWeekMonthYear

Pill Variant

<%= rui_radio_button(
  object: :filter,
  method: :period,
  collection: [["Day", "day"], ["Week", "week"], ["Month", "month"], ["Year", "year"]],
  variant: :pill,
  layout: :horizontal,
  color: :blue,
  selected: "week"
) %>

Pill Colors

RedBlue

GreenBlue

PurpleBlue

Button Variant

Toolbar-style segmented controls. Perfect for view toggles, mode selection, or compact option groups.

ListGridTable

Button Variant (Segmented Control)

<%= rui_radio_button(
  object: :view,
  method: :mode,
  collection: [["List", "list"], ["Grid", "grid"], ["Table", "table"]],
  variant: :button,
  layout: :horizontal,
  color: :zinc,
  selected: "grid"
) %>

Button Colors

Option AOption BOption C

Layouts

Vertical (default) and horizontal arrangements for radio groups.

Layouts

<%# Vertical (default) %>
<%= rui_radio_button(object: :demo, method: :opt, collection: options, layout: :vertical) %>

<%# Horizontal %>
<%= rui_radio_button(object: :demo, method: :opt, collection: options, layout: :horizontal) %>

Descriptions

Add descriptions to collection items for additional context.

Priority Level

Low

Standard processing time

Medium

Faster processing

High

Immediate attention required

With Descriptions

<%= rui_radio_button(
  object: :priority,
  method: :level,
  collection: [
    ["Low", "low", "Standard processing time"],
    ["Medium", "medium", "Faster processing"],
    ["High", "high", "Immediate attention required"]
  ],
  description_method: 2,
  label: "Priority Level",
  color: :primary
) %>

States

Disabled and required states for radio button groups.

Disabled Group

Option A

Option B

Required Group *

Option A

Option B

States

<%# Disabled %>
<%= rui_radio_button(object: :demo, method: :opt, collection: options, disabled: true, label: "Disabled") %>

<%# Required %>
<%= rui_radio_button(object: :demo, method: :opt, collection: options, required: true, label: "Required") %>

Form Builder Integration

Use with Rails form builder for automatic object binding and validation.

Form Builder Usage

<%= form_with model: @post do |f| %>
  <%= f.rui_radio_button(:status,
    collection: Post.statuses,
    label: "Post Status",
    help_text: "Select the current status"
  ) %>

  <%= f.rui_radio_button(:priority,
    collection: [["Low", 1], ["Medium", 2], ["High", 3]],
    variant: :button,
    layout: :horizontal,
    label: "Priority"
  ) %>

  <%= f.rui_button %>
<% end %>

Note: When using f.rui_radio_button, the selected state is automatically detected from the form object's attribute value.

Rails Integration Comparison

Rails Helper	rui_radio_button Equivalent
`f.radio_button`	`f.rui_radio_button(:method, collection: items)`
`f.collection_radio_buttons`	`f.rui_radio_button(:method, collection: Model.all)`

Live Example

See the radio button component in action on the New Post page.

Accessibility

The Radio Button component follows WAI-ARIA best practices for accessible form controls.

ARIA Attributes

role="radiogroup" on the container (implicit with <fieldset>)
role="radio" implicit on native <input type="radio">
aria-checked state managed automatically
aria-describedby links to description text when provided

Keyboard Navigation

Tab to enter/exit the radio group
Arrow Up/Down or Arrow Left/Right to navigate between options
Space to select the focused option
Visible focus ring on the focused radio button

Semantic HTML

Native <input type="radio"> elements
<fieldset> groups related radio buttons
<legend> provides group label for the fieldset
<label> elements properly associated via for/id

Screen Reader Support

Group label (legend) announced when entering the radio group
Each option label announced with checked/unchecked state
Position announced (e.g., "1 of 3")
Description text read after label when provided

API Reference

rui_radio_button

Radio button group for selecting one option from mutually exclusive choices

Parameter	Type	Default	Description
name_or_method*	Symbol/String	—	Positional first arg - name for standalone, method for form builder
collection*	Enumerable	—	Collection of options (Array, ActiveRecord, Hash, enum)

Appearance

Visual styling options

Parameter	Type	Default	Description
variant	Symbol	`:radio`	Visual style `:radio` `:card` `:pill` `:button`
color	Symbol	`:primary`	Color theme - semantic or any Tailwind color
size	Symbol	`:base`	Radio button size `:xs` `:sm` `:base` `:lg` `:xl`
layout	Symbol	`:vertical`	Layout arrangement `:vertical` `:horizontal`

Labels & Text

Text and description options

Parameter	Type	Default	Description
label	String	—	Legend text for the radio group
description	String	—	Description text for single radio (rarely used)
help_text	String	—	Help text displayed below group

Collection Configuration

Options for processing collection items

Parameter	Type	Default	Description
value_method	Symbol	`:id`	Method to get value from collection items
text_method	Symbol	`:name`	Method to get label text from collection items
description_method	Symbol/Integer	—	Method or array index for option description
selected	Any	—	Pre-selected value (overrides object value)

States

State options

Parameter	Type	Default	Description
required	Boolean	`false`	Show required indicator (*)
disabled	Boolean	`false`	Disable all radio buttons

Form Builder

Options when used with Rails form builder (f.rui_radio_button)

Parameter	Type	Default	Description
form	FormBuilder	—	Rails form builder instance (auto-set by f.rui_radio_button)
object	Object/Symbol	—	Object to bind radio button to
method	Symbol	—	Attribute name on the object (keyword alternative)
name	String	—	Input name attribute (keyword alternative)

Slots

Content slots for customizing component parts

Slot	Description
icon	Icon for button/pill/card variants via radio.with_icon(:name)

Related Components

Checkbox

Multiple selection with checkboxes

Select

Dropdown selection for longer lists

Combobox

Searchable selection with autocomplete

Key Features

Basic Usage

Colors

Semantic Colors

Tailwind Colors

Sizes

Card Variant

Card Colors

Pill Variant

Pill Colors

Button Variant

Button Colors

Layouts

Descriptions

States

Form Builder Integration

Rails Integration Comparison

Live Example

Accessibility

ARIA Attributes

Keyboard Navigation

Semantic HTML

Screen Reader Support

API Reference

rui_radio_button

Appearance

Labels & Text

Collection Configuration

States

Form Builder

Slots

Related Components

Checkbox

Select

Combobox