Back to all examples

Include descriptions for items in a checkbox list

ReactAngularWeb Components
const [selected, setSelected] = useState("1");
<GoabFormItem label="How do you want to sign in?">
      <GoabRadioGroup
        name="selectOne"
        value={selected}
        onChange={(event) => setSelected(event.value)}
      >
        <GoabRadioItem
          value="1"
          label="Sign in as a business"
          description="Use the account associated with the business"
        />
        <GoabRadioItem
          value="2"
          label="Sign in as an individual"
          description="If you don't have a Alberta.ca login, you can create one"
        />
      </GoabRadioGroup>
    </GoabFormItem>

Add descriptive text to radio button options to help users understand the implications of each choice.

When to use

Use this pattern when:

  • Radio options need additional explanation
  • Users might not understand the difference between options
  • Each option has specific implications or requirements
  • Providing context helps users make informed decisions

Considerations

  • Keep descriptions concise but informative
  • Ensure the label and description work together
  • Use consistent description length across options
  • Consider whether all options need descriptions or just some