Radio

Radio components provide users a way to select only one option from a list of two or more options.

React Component

Option 1

Option 2

Option 2b

Message text goes here.

Text for testing custom content.

Disabled

Checked & Disabled

Error

Bordered Radio

Bordered Option

caption text

Published

Bordered Option with Error

caption text

Sage Component

SageRadio

<!-- Default -->
<%= sage_component SagePanelStack, {} do %>
  <%= sage_component SageRadio, {
    id: "r1",
    name: "radio1",
    value: "1",
    label_text: "Option 1",
    checked: true
  } %>

  <%= sage_component SageRadio, {
    id: "r2",
    name: "radio1",
    value: "2",
    label_text: "Option 2"
  } %>

  <%= sage_component SageRadio, {
    id: "r2b",
    name: "radio1",
    value: "2b",
    label_text: "Option 2b",
    message: "Message text goes here.",
  } do %>
    <%= content_for :sage_radio_custom_content do %>
      <p>Text for testing custom content.</p>
    <% end %>
  <% end %>

  <!-- Disabled -->
  <%= sage_component SageRadio, {
    id: "r3",
    name: "radio2",
    value: "3",
    label_text: "Disabled",
    disabled: true
  } %>

  <!-- Checked & Disabled -->
  <%= sage_component SageRadio, {
    id: "r4",
    name: "radio3",
    value: "4",
    label_text: "Checked & Disabled",
    checked: true,
    disabled: true
  } %>

  <!-- Error -->
  <%= sage_component SageRadio, {
    id: "r5",
    name: "radio4",
    value: "5",
    label_text: "Error",
    required: true,
    has_error: true
  } %>
<% end %>

<h3 class="t-sage-heading-6">Bordered Radio</h3>
<%= sage_component SageRadio, {
  caption: "caption text",
  id: "r6",
  name: "radio5",
  value: "6",
  has_border: true,
  label_text: "Bordered Option",
  required: true,
} do %>
  <%= content_for :sage_radio_custom_content do %>
    <%= sage_component SageBadge, {
      value: "Published",
      color: "published",
    }%>
  <% end %>
<% end %>

<%= sage_component SageRadio, {
  caption: "caption text",
  id: "r7",
  name: "radio6",
  value: "7",
  label_text: "Bordered Option with Error",
  required: true,
  has_border: true,
  has_error: true
} %>

Property	Description	Type	Default
`attributes`	For setting additional attributes not defined above. Accepts a Ruby hash of valid key-value properties, such as data-attributes	Hash	`nil`
`caption`	Sets the caption text for the component in a bordered card.	String	`nil`
`checked`	Sets the state of the radio button to `checked` by default	Boolean	`nil`
`disabled`	Prevents all user interaction with the control. Be aware that when combining a disabled radio button with a default `checked` state, the value of the radio button will not be included when its parent form is submitted. Likewise, setting Required will not have any effect.	Boolean	`nil`
`has_border`	When set, the focus styles affect the parent container, not the form element.	Boolean	`nil`
`has_error`	This will display error styles on the component.	Boolean	`nil`
`id` required	Unique identifier for this input field. Should match the `for` property on the corresponding label.	String	`nil`
`label_text` required	Sets the label text for the component.	String	`nil`
`message`	Sets the message text for the component in the default, unbordered context.	String	`nil`
`name` required	Using a singular name groups radio buttons together, allowing the user to toggle between them (see Option 1 and Option 2 examples above)	String	`nil`
`required`	Adding this attribute allows basic HTML form validation on this field	Boolean	`nil`
`standalone`	When set, this component is expected to be used in isolation.	Boolean	`nil`
`value` required	Sets the value of the form component.	String	`nil`
Content Slots
`:sage_radio_custom_content`	Slot for any custom content below the radio.

Verify that the ID of the input and the label's for attribute match

Don't

Combine the checked & disabled states with caution! Clearly describe why this item cannot be unselected.