Include descriptions for items in a checkbox list
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