Radio

Radio buttons allow users to select exactly one option from a set.

Radio Group

Group radio buttons with the same name.

Free

Pro

Enterprise

<div class="space-y-3">
  <%= render Rvk::RadioComponent.new(name: "plan", value: "free", label: "Free", checked: true) %>
  <%= render Rvk::RadioComponent.new(name: "plan", value: "pro", label: "Pro") %>
  <%= render Rvk::RadioComponent.new(name: "plan", value: "enterprise", label: "Enterprise") %>
</div>

Horizontal Layout

Use flex for horizontal radio groups.

<div class="flex gap-6">
  <%= render Rvk::RadioComponent.new(name: "size", value: "s", label: "S") %>
  <%= render Rvk::RadioComponent.new(name: "size", value: "m", label: "M", checked: true) %>
  <%= render Rvk::RadioComponent.new(name: "size", value: "l", label: "L") %>
  <%= render Rvk::RadioComponent.new(name: "size", value: "xl", label: "XL") %>
</div>

Sizes

Radio buttons come in 3 sizes.

Small radio

Medium radio

Large radio

<%= render Rvk::RadioComponent.new(name: "radio_sm", value: "1", label: "Small", size: :sm) %>
<%= render Rvk::RadioComponent.new(name: "radio_md", value: "1", label: "Medium", size: :md) %>
<%= render Rvk::RadioComponent.new(name: "radio_lg", value: "1", label: "Large", size: :lg) %>

With Hints

Add descriptions to each option.

Standard Shipping

4-10 business days

Express Shipping

2-3 business days

Overnight Shipping

Next business day

<%= render Rvk::RadioComponent.new(
  name: "shipping",
  value: "standard",
  label: "Standard Shipping",
  hint: "4-10 business days",
  checked: true
) %>

Error State

Display validation errors.

Credit Card

Please select a payment method.

PayPal

Bank Transfer

<%= render Rvk::RadioComponent.new(
  name: "payment",
  value: "card",
  label: "Credit Card",
  error: "Please select a payment method."
) %>

Disabled State

Disabled radio buttons are non-interactive.

Enabled option

Disabled option

Another enabled option

<%= render Rvk::RadioComponent.new(name: "option", value: "1", label: "Enabled option") %>
<%= render Rvk::RadioComponent.new(name: "option", value: "2", label: "Disabled option", disabled: true) %>

Props

Prop	Type	Default	Description
name	String	required	Form field name (same for group)
value	String	required	Value when selected
label	String	nil	Label text (displayed inline)
size	Symbol	:md	Radio size: :sm, :md, :lg
checked	Boolean	false	Whether radio is selected
hint	String	nil	Helper text below radio
error	String	nil	Error message
required	Boolean	false	Mark as required
disabled	Boolean	false	Disable the radio