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

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.

PS

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