Choice

A radio button tab for making a choice. To be used inside a tabs component.

React Component

Single Line with Active State (radio type)

With Radio

Option 1a

Multi-Line (radio type)

Arrow Variation

Option 1

Icon Variation

Select any icon to appear to the left of the text.

With additional subtext.

Graphic Variation (with link text)

Provide a graphic to the left of the text.

Calendly

Rich text/Customized

Choice cards can also be opened up for custom content to be composed within.

Custom heading

Custom content here...

Icon alignment

While by default all icon types will align in the center of the choice card, they can be adjusted to align at the "start" or top of the card.

Sage Component

SageChoice

<%
long_description = "Description with longer text to cause wrapping and make the top alignment appear more necessary."
%>
<h3 class="t-sage-heading-6">Single Line with Active State (radio type)</h3>

<%= sage_component SageChoice, {
    target: "example",
    text: "Option 1",
    type: "radio",
    active: true,
} %>

<h3 class="t-sage-heading-6">With Radio</h3>
<%= sage_component SageChoice, {
    target: "example",
    text: "Option 1a",
    type: "radio",
    active: false,
    radio_configs: {
      id: 'cr-1a',
      name: 'cr-1',
      value: 'option-a',
    }
  }
%>

<h3 class="t-sage-heading-6">Multi-Line  (radio type)</h3>
<%= sage_component SageChoice, {
    target: "example",
    text: "Option 1",
    subtext: "Description of Option 1",
    type: "radio",
  }
%>

<h3 class="t-sage-heading-6">Arrow Variation</h3>
<%= sage_component SageChoice, {
    attributes: {
      href: "//example.com"
    },
    text: "Option 1",
    type: "arrow",
  }
%>

<h3 class="t-sage-heading-6">Icon Variation</h3>
<p>Select any icon to appear to the left of the text.</p>
<%= sage_component SageChoice, {
    target: "example",
    text: "Option 1",
    type: "icon",
    icon: "video-on",
  }
%>

<p>With additional subtext.</p>
<%= sage_component SageChoice, {
    target: "example",
    text: "Option 1",
    type: "icon",
    icon: "video-on",
    subtext: "Description of Option 1",
  }
%>

<h3 class="t-sage-heading-6">Graphic Variation (with link text)</h3>
<p>Provide a graphic to the left of the text.</p>
<%= sage_component SageChoice, {
    target: "example",
    text: "Calendly",
    type: "graphic",
    graphic: image_tag("card-placeholder-sm.png", alt: ""),
    link_text: "Sign in",
    attributes: {
      href: "http://example.com",
    },
  }
%>

<h3 class="t-sage-heading-6">Rich text/Customized</h3>
<p>Choice cards can also be opened up for custom content to be composed within.</p>
<style>
.custom-choice {
  max-width: 352px;
}
.custom-choice__content {
  text-align: center;
  justify-items: center;
}
</style>
<%= sage_component SageChoice, {
  attributes: {
    href: "http://example.com",
  },
  css_classes: "custom-choice",
  custom_content_class: "custom-choice__content",
  target: "example",
} do %>
  <%= sage_component SageAvatar, { initials: 'PS' } %>
  <%= sage_component SageCardBlock, {} do %>
    <h4>Custom heading</h4>
    <p>Custom content here...</p>
  <% end %>
<% end %>


<h3 class="t-sage-heading-6">Icon alignment</h3>
<p>While by default all icon types will align in the center of the choice card, they can be adjusted to align at the "start" or top of the card.</p>
<%= sage_component SageChoice, {
    target: "example",
    text: "Option 1",
    subtext: long_description,
    type: "radio",
    vertical_align_icon: "start",
  }
%>
<%= sage_component SageChoice, {
    target: "example",
    text: "Option 1",
    subtext: long_description,
    type: "icon",
    icon: "video-on",
    vertical_align_icon: "start",
  }
%>

Property	Description	Type	Default
`active`	Toggles `--active` modifier to visually indicate whether this choice is active/selected.	Boolean	`false`
`align_center`	Toggles `--align-center` modifier to visually center the icon and text. This is only intended to be used with the 'icon' type.	Boolean	`false`
`vertical_align_icon`	Configures how the icons ("radio" and "icon"; not "arrow" or "graphc") should be vertically aligned within the card.	`nil` (centered), "start"`	`nil`
`attributes`	For setting additional attributes not defined above. Accepts a Ruby hash of valid key-value properties, such as data-attributes	Hash	`nil`
`disabled`	Sets the state to \"disabled\" by default.	Boolean	`nil`
`custom_content_class`	Sets a custom class on the `__content` element within this component. This can be added when custom content is passed into the component block for additional local styling on that block.	String	`nil`
`graphic`	Sets the image path to for asset for this component.	String	`nil`
`icon`	Provides the name of the Sage Icon to be displayed before the text content.	String	`nil`
`link_text`	Sets the link text for the component.	String	`nil`
`radio_configs`	If provided, this adjusts a choice to include a radio `input` that is visually hidden and toggles on when the choice is selected.	{ name: String, id: String, value: String }	`nil`
`subtext`	Sets the content of the secondary text line	String	`nil`
`target`	Provides the `id` for the corresponding Tab Pane that this choice will activate.	String	`nil`
`text`	Sets the content of the primary text line	String	`nil`
`type`	Sets the choice graphic type. If `icon` is used here the `icon` prop must also be set.	`icon`, `radio`, or `arrow`	`radio`

Don't

The radio type should only be used to conditionally render content. This component should not be used as a form field. In that case use the Radio component