Include descriptions for items in a checkbox list
const [selected, setSelected] = useState("1");<GoabxFormItem label="How do you want to sign in?">
<GoabxRadioGroup
name="selectOne"
value={selected}
onChange={(event) => setSelected(event.value)}
>
<GoabxRadioItem
value="1"
label="Sign in as a business"
description="Use the account associated with the business"
/>
<GoabxRadioItem
value="2"
label="Sign in as an individual"
description="If you don't have a Alberta.ca login, you can create one"
/>
</GoabxRadioGroup>
</GoabxFormItem>form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
selectOne: ["1"],
});
}<goabx-form-item label="How do you want to sign in?" [formGroup]="form">
<goabx-radio-group name="selectOne" formControlName="selectOne">
<goabx-radio-item
value="1"
label="Sign in as a business"
[description]="optionOneDescription">
<ng-template #optionOneDescription>
Use the account associated with the business
</ng-template>
</goabx-radio-item>
<goabx-radio-item
value="2"
label="Sign in as an individual"
[description]="optionTwoDescription">
<ng-template #optionTwoDescription>
If you don't have a Alberta.ca login, you can create one
</ng-template>
</goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>document.querySelector("goa-radio-group").addEventListener("_change", (e) => {
console.log("Selected:", e.detail.value);
});<goa-form-item version="2" label="How do you want to sign in?">
<goa-radio-group version="2" name="selectOne" value="1">
<goa-radio-item value="1" label="Sign in as a business">
<span slot="description">Use the account associated with the business</span>
</goa-radio-item>
<goa-radio-item value="2" label="Sign in as an individual">
<span slot="description">If you don't have a Alberta.ca login, you can create one</span>
</goa-radio-item>
</goa-radio-group>
</goa-form-item>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