Back to all examples

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