Radio Card

The Radio Card is a form element (radio input) with a bigger target area represented by a card container that allows users to select a single item from a list of related options.

Usage

Use the Radio Card Group in most cases. Use individual Radio Cards only in special cases and sparingly.

When to use

• To allow users to select a single option from a group of two or more Radio Cards.

When not to use

• As a static card, use a Card
• When a user could select multiple options, use a Checkbox

Control position

In most cases, we recommend using the bottom position. Still, we offer Radio Cards in a left position, which is a good option when the content in the cards is minimal.

Bottom

Left

Alignment

Left

Center

Nested badge

Badges can be used in radio cards to display additional information and context. To ensure proper usage of the badge component, refer to the guidelines.

Legend style

Default style

When placed along with other form components, we recommend using the default legend style provided by the component.

Display style

When using the Radio Card Group as its own section, we recommend using Display/400/Bold for the legend.

Error validation

For error validation recommendations, refer to the Form patterns documentation.

Content

Form::Label

For general content recommendations, refer to the Primitives documentation.

Related

• Radio
• Card
• Form patterns

How to use this component

Form::RadioCard::Group creates:

• a <fieldset> container
• a <legend> element
• a list of rendered <Form::RadioCard> components (with aria-describedby attributes automatically generated).

The @name argument offers an easy way to provide the same name for all the radio controls with a single declaration.

<Hds::Form::RadioCard::Group @name="radio-card-basic-example" @alignment="center" as |G|>
  <G.Legend>Create connection</G.Legend>
    <G.RadioCard @checked={{true}} {{on "change" this.onChange}} as |R|>
      <R.Icon @name="aws-color" />
      <R.Label>Quick peering with Quick Links</R.Label>
      <R.Badge @text="2-5 min" />
      <R.Description>Quick peering with quick links will provide the fastest way to connect to your providers’ network.</R.Description>
    </G.RadioCard>
    <G.RadioCard {{on "change" this.onChange}} as |R|>
      <R.Icon @name="aws-color" />
      <R.Label>Manual peering using AWS CLI</R.Label>
      <R.Badge @text="5-10 min" />
      <R.Description>Provide you AWS CLI template to apply connection settings.</R.Description>
    </G.RadioCard>
    <G.RadioCard {{on "change" this.onChange}} as |R|>
      <R.Icon @name="hcp" />
      <R.Label>Manual peering using HCP and AWS web console</R.Label>
      <R.Badge @text="30-60 min" />
      <R.Description>Manually follow UI instructions to complete configuring a connection at provider side.</R.Description>
    </G.RadioCard>
</Hds::Form::RadioCard::Group>

Custom content

Customizable options include:

• Defining custom content using the Generic block
• Defining a custom width using the maxWidth argument
• Adding multiple Badge components

<Hds::Form::RadioCard::Group @name="radio-card-custom-example" as |G|>
  <G.Legend>Cluster type</G.Legend>
  <G.RadioCard @checked={{true}} {{on "change" this.onChange}} as |R|>
    <R.Label>HCP-managed Consul</R.Label>
    <R.Badge @text="6 clusters left" />
    <R.Generic>
      <ul class="doc-radio-card-list-demo">
        <li class="hds-typography-display-100">Connect workloads in your cloud provider network with HCP</li>
        <li class="hds-typography-display-100">Offload Consul operations to Hashicorp Experts</li>
      </ul>
    </R.Generic>
  </G.RadioCard>
  <G.RadioCard {{on "change" this.onChange}} as |R|>
    <R.Label>Self-managed Consul</R.Label>
    <R.Badge @text="5 clusters left" />
    <R.Badge @text="Kubernetes only" @icon="kubernetes" />
    <R.Generic>
      <ul class="doc-radio-card-list-demo">
        <li class="hds-typography-display-100">Multi-cloud artifact registry</li>
        <li class="hds-typography-display-100">Golden images workflow</li>
        <li class="hds-typography-display-100">Terraform Cloud integration</li>
        <li class="hds-typography-display-100">10 free images/month</li>
        <li class="hds-typography-display-100">250 free requests/month</li>
      </ul>
    </R.Generic>
  </G.RadioCard>
</Hds::Form::RadioCard::Group>

Component API

Form::RadioCard

Contextual components

Icon, Label, Badge, Description, and Generic content are passed to the RadioCard as contextual components in this order, regardless of the declaration order.

Form::RadioCard::Group

Contextual components

Legend, HelperText, RadioCard, and Error content are passed to the group as contextual components.

The group of elements is automatically wrapped in a <fieldset> element.

Anatomy

Item

Group

States

Conformance rating

Form::RadioCard

Form::RadioCard is conformant when used as directed.

Form::RadioCard::Group

Form::RadioCard::Group is conformant when used as directed.

Keyboard navigation

Move focus to the selected card. If nothing is selected, focus will move to the first Radio Card.

Navigate between Radio Cards. As the card is focused it also becomes selected.

Applicable WCAG Success Criteria

This section is for reference only, some descriptions have been truncated for brevity.

This component intends to conform to the following WCAG Success Criteria:

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.