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

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.

Validation

Types of validation

We recommend using a combination of client-side and server-side validation for the best user experience.

Client-side validation

Client-side validation, sometimes called inline validation, is an initial check in the browser to ensure that required fields aren’t empty and the value is in the correct format. Client-side validation allows the user to quickly resolve errors before submitting the form.

Server-side validation

Server-side validation provides a more thorough check on the server once the data has been submitted and helps keep our applications safe.

When using server-side validation, display a Critical Inline Alert above the form listing all errors with links to each invalid field.

Content

Form::Label

• We recommend keeping labels clear and concise, about 1-3 words. They should not consist of full sentences.
• 3.2.2 Labels or Instructions (A): Labels or instructions are provided when content requires user input.

Form::HelperText

• Use helper text to give the user extra details about the option(s) you’re asking them to select, e.g., “Learn more about our pricing”.

Form::Error

• Error messages should provide the user with enough context to guide them in resolving the error.
• Keep labels and legends short and to the point (ie. "Select one option")
• Avoid overt politeness; don’t use "please" or "thank you" in your messaging.
• 3.3.1 Error Identification: If an input error is automatically detected, the item that is in error is identified and the error is described to the user in text.
• 3.3.3 Error Suggestion (AA): If an input error is automatically detected and suggestions for correction are known, then the suggestions are provided to the user, unless it would jeopardize the security or purpose of the content.
• 3.3.4 Error Prevention (Legal, Financial, Data) (AA): For Web pages that cause legal commitments or financial transactions for the user to occur, that modify or delete user-controllable data in data storage systems, or that submit user test responses, at least one of the following is true: submissions are reversible, data is checked and the user is provided an opportunity to correct them, a mechanism is available for reviewing, confirming, and correcting the information before finalizing the submission.
• 4.1.3 Status Messages: In content implemented using markup languages, status messages can be programmatically determined through role or properties such that they can be presented to the user by assistive technologies without receiving focus.

Related

• Radio
• Card

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 @maxWidth="33%" @checked={{true}} {{on "change" this.onChange}} as |R|>
    <R.Label>HCP-managed Consul</R.Label>
    <R.Badge @text="6 clusters left" />
    <R.Generic>
      <ul>
        <li>Connect workloads in your cloud provider network with HCP</li>
        <li>Offload Consul operations to Hashicorp Experts</li>
      </ul>
    </R.Generic>
  </G.RadioCard>
  <G.RadioCard @maxWidth="33%" {{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>
        <li>Multi-cloud artifact registry</li>
        <li>Golden images workflow</li>
        <li>Terraform Cloud integration</li>
        <li>10 free images/month</li>
        <li>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.