Radio

Allow users to select one option from a set.

Props

name

string

The name for the radio group. Used for accessibility and change events.

ariaLabel

string

Defines how the radio group will be announced by screen readers.

disabled

boolean

Disables all radio items in the group.

error

boolean

Shows an error state on all radio items in the group.

string

The identifier for the radio group element.

orientation

GoabRadioGroupOrientation

Sets the layout direction. 'vertical' stacks items, 'horizontal' places them in a row.

Defaults to vertical.

size

GoabRadioGroupSize

Sets the size of all radio items. 'compact' reduces spacing for dense layouts.

Defaults to default.

testId

string

Sets a data-testid attribute for automated testing.

value

string

The currently selected value in the radio group.

mt, mr, mb, ml

Spacing

Apply margin to the top, right, bottom, and/or left of the component.

Events

onChange

(detail: GoabRadioGroupOnChangeDetail) => void

Callback fired when the selected radio item changes.

Radio Item Props

ariaLabel

string

Defines how this option will be announced by screen readers.

compact

boolean

Reduces spacing for dense layouts.

description

string | React.ReactNode

Additional description text displayed below the label.

disabled

boolean

Disables this radio option. Also disabled if the parent RadioGroup is disabled.

error

boolean

Shows an error state on this radio option.

label

string

The display label for this radio option. Falls back to value if not provided.

maxWidth

string

Sets the maximum width of this radio item.

name

string

The name of the radio group. Inherited from the parent RadioGroup if not set.

revealAriaLabel

string

Text announced by screen readers when the reveal content is displayed.

value

string

The value of this radio option. Will be emitted when selected.

mt, mr, mb, ml

Spacing

Apply margin to the top, right, bottom, and/or left of the component.

Radio Item Events

Radio Item ReactNode

description

ReactNode

Additional description text displayed below the label.

reveal

ReactNode

Content revealed below the radio option when it is selected.

Examples

Add a record using a drawer

const [open, setOpen] = useState(false);

<GoabButton leadingIcon="add" onClick={() => setOpen(true)}>
  Add Record
</GoabButton>
<GoabDrawer
  maxSize="492px"
  open={open}
  heading="Add Record"
  position="right"
  onClose={() => setOpen(false)}
  actions={
    <GoabButtonGroup alignment="start">
      <GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
        Add record
      </GoabButton>
      <GoabButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
        Cancel
      </GoabButton>
    </GoabButtonGroup>
  }
>
  <GoabFormItem label="Level of education">
    <GoabDropdown onChange={() => {}} name="education" value="university">
      <GoabDropdownItem value="high-school" label="High School Diploma" />
      <GoabDropdownItem value="college" label="College Diploma" />
      <GoabDropdownItem value="university" label="University Degree" />
      <GoabDropdownItem value="masters" label="Master's Degree" />
      <GoabDropdownItem value="doctorate" label="Doctorate" />
    </GoabDropdown>
  </GoabFormItem>
  <GoabFormItem label="Educational institution" mt="l">
    <GoabInput name="education" type="text" onChange={() => {}} />
  </GoabFormItem>
  <GoabFormItem label="Field of study" requirement="optional" mt="l">
    <GoabInput name="fieldOfStudy" type="text" onChange={() => {}} />
  </GoabFormItem>
  <GoabFormItem label="Is the person currently attending?" mt="l">
    <GoabRadioGroup
      name="attendTraining"
      orientation="horizontal"
      onChange={() => {}}
    >
      <GoabRadioItem value="yes" label="Yes" />
      <GoabRadioItem value="no" label="No" />
    </GoabRadioGroup>
  </GoabFormItem>
  <GoabFormItem label="Start date" mt="l">
    <GoabDatePicker onChange={() => {}} value={new Date("2022-09-01")} />
    <GoabCheckbox
      name="startDateApproximate"
      text="Approximate date"
      value="y"
      mt="s"
    />
  </GoabFormItem>
  <GoabFormItem label="Credential received?" mt="l">
    <GoabRadioGroup
      name="credentialReceived"
      orientation="horizontal"
      onChange={() => {}}
    >
      <GoabRadioItem value="yes" label="Yes" />
      <GoabRadioItem value="no" label="No" />
    </GoabRadioGroup>
  </GoabFormItem>
</GoabDrawer>

open = false;

onClick() {
  this.open = true;
}

onClose() {
  this.open = false;
}

dropdownOnChange(event: any) {
  console.log(event);
}

inputOnChange(event: any) {
  console.log(event);
}

radioOnChange(event: any) {
  console.log(event);
}

dateOnChange(event: any) {
  console.log(event);
}

closeDrawer() {
  this.open = false;
}

<goab-button leadingIcon="add" (onClick)="onClick()">Add Record</goab-button>
<goab-drawer
  maxSize="492px"
  [open]="open"
  heading="Add Record"
  position="right"
  (onClose)="onClose()"
  [actions]="actions"
>
  <goab-form-item label="Level of education">
    <goab-dropdown
      (onChange)="dropdownOnChange($event)"
      name="education"
      value="university"
    >
      <goab-dropdown-item
        value="high-school"
        label="High School Diploma"
      ></goab-dropdown-item>
      <goab-dropdown-item value="college" label="College Diploma"></goab-dropdown-item>
      <goab-dropdown-item
        value="university"
        label="University Degree"
      ></goab-dropdown-item>
      <goab-dropdown-item value="masters" label="Master's Degree"></goab-dropdown-item>
      <goab-dropdown-item value="doctorate" label="Doctorate"></goab-dropdown-item>
    </goab-dropdown>
  </goab-form-item>
  <goab-form-item label="Educational institution" mt="l">
    <goab-input
      name="education"
      type="text"
      (onChange)="inputOnChange($event)"
    ></goab-input>
  </goab-form-item>
  <goab-form-item label="Field of study" requirement="optional" mt="l">
    <goab-input
      name="fieldOfStudy"
      type="text"
      (onChange)="inputOnChange($event)"
    ></goab-input>
  </goab-form-item>
  <goab-form-item label="Is the person currently attending?" mt="l">
    <goab-radio-group
      name="attendTraining"
      orientation="horizontal"
      (onChange)="radioOnChange($event)"
    >
      <goab-radio-item value="yes" label="Yes"></goab-radio-item>
      <goab-radio-item value="no" label="No"></goab-radio-item>
    </goab-radio-group>
  </goab-form-item>
  <goab-form-item label="Start date" mt="l">
    <goab-date-picker (onChange)="dateOnChange($event)"></goab-date-picker>
    <goab-checkbox
      name="startDateApproximate"
      text="Approximate date"
      value="y"
      mt="s"
    ></goab-checkbox>
  </goab-form-item>
  <goab-form-item label="Credential received?" mt="l">
    <goab-radio-group
      name="credentialReceived"
      orientation="horizontal"
      (onChange)="radioOnChange($event)"
    >
      <goab-radio-item value="yes" label="Yes"></goab-radio-item>
      <goab-radio-item value="no" label="No"></goab-radio-item>
    </goab-radio-group>
  </goab-form-item>
  <ng-template #actions>
    <goab-button-group alignment="start">
      <goab-button type="primary" size="compact" (onClick)="closeDrawer()"
        >Add record</goab-button
      >
      <goab-button type="tertiary" size="compact" (onClick)="closeDrawer()"
        >Cancel</goab-button
      >
    </goab-button-group>
  </ng-template>
</goab-drawer>

const drawer = document.getElementById("record-drawer");
const openBtn = document.getElementById("open-drawer-btn");
const addBtn = document.getElementById("add-record-btn");
const cancelBtn = document.getElementById("cancel-btn");

openBtn.addEventListener("_click", () => {
  drawer.setAttribute("open", "true");
});

drawer.addEventListener("_close", () => {
  drawer.removeAttribute("open");
});

addBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

cancelBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

<goa-button version="2" id="open-drawer-btn" leadingicon="add">Add Record</goa-button>
<goa-drawer
  version="2"
  id="record-drawer"
  max-size="492px"
  heading="Add Record"
  position="right"
>
  <goa-form-item version="2" label="Level of education">
    <goa-dropdown version="2" name="education" value="university">
      <goa-dropdown-item
        value="high-school"
        label="High School Diploma"
      ></goa-dropdown-item>
      <goa-dropdown-item value="college" label="College Diploma"></goa-dropdown-item>
      <goa-dropdown-item value="university" label="University Degree"></goa-dropdown-item>
      <goa-dropdown-item value="masters" label="Master's Degree"></goa-dropdown-item>
      <goa-dropdown-item value="doctorate" label="Doctorate"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Educational institution" mt="l">
    <goa-input version="2" name="education" type="text"></goa-input>
  </goa-form-item>
  <goa-form-item version="2" label="Field of study" requirement="optional" mt="l">
    <goa-input version="2" name="fieldOfStudy" type="text"></goa-input>
  </goa-form-item>
  <goa-form-item version="2" label="Is the person currently attending?" mt="l">
    <goa-radio-group version="2" name="attendTraining" orientation="horizontal">
      <goa-radio-item value="yes" label="Yes"></goa-radio-item>
      <goa-radio-item value="no" label="No"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>
  <goa-form-item version="2" label="Start date" mt="l">
    <goa-date-picker version="2"></goa-date-picker>
    <goa-checkbox
      version="2"
      name="startDateApproximate"
      text="Approximate date"
      value="y"
      mt="s"
    ></goa-checkbox>
  </goa-form-item>
  <goa-form-item version="2" label="Credential received?" mt="l">
    <goa-radio-group version="2" name="credentialReceived" orientation="horizontal">
      <goa-radio-item value="yes" label="Yes"></goa-radio-item>
      <goa-radio-item value="no" label="No"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>
  <div slot="actions">
    <goa-button-group alignment="start">
      <goa-button version="2" id="add-record-btn" type="primary" size="compact"
        >Add record</goa-button
      >
      <goa-button version="2" id="cancel-btn" type="tertiary" size="compact"
        >Cancel</goa-button
      >
    </goa-button-group>
  </div>
</goa-drawer>

Add and edit lots of filters

const [open, setOpen] = useState(false);

<GoabButton onClick={() => setOpen(true)}>Filters</GoabButton>
<GoabDrawer
  heading="Filters"
  open={open}
  onClose={() => setOpen(false)}
  position="right"
  actions={
    <GoabButtonGroup alignment="start">
      <GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
        Apply filters
      </GoabButton>
      <GoabButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
        Cancel
      </GoabButton>
    </GoabButtonGroup>
  }
>
  <GoabFormItem label="Entry status">
    <GoabCheckboxList name="entryStatus" onChange={() => {}}>
      <GoabCheckbox name="draft" text="Draft" value="draft" />
      <GoabCheckbox name="published" text="Published" value="published" />
    </GoabCheckboxList>
  </GoabFormItem>
  <GoabFormItem label="Assigned to - Region" mt="l">
    <GoabCheckboxList name="region" onChange={() => {}}>
      <GoabCheckbox name="calgary" text="Calgary" value="calgary" />
      <GoabCheckbox name="central" text="Central" value="central" />
      <GoabCheckbox name="edmonton" text="Edmonton" value="edmonton" />
      <GoabCheckbox name="north" text="North" value="north" />
      <GoabCheckbox name="south" text="South" value="south" />
    </GoabCheckboxList>
  </GoabFormItem>
  <GoabFormItem label="Assigned to" mt="l">
    <GoabDropdown name="assignedTo" onChange={() => {}}>
      <GoabDropdownItem value="1" label="Person 1" />
      <GoabDropdownItem value="2" label="Person 2" />
    </GoabDropdown>
  </GoabFormItem>
  <GoabFormItem label="Date taken" mt="l">
    <GoabRadioGroup name="dateTaken" onChange={() => {}}>
      <GoabRadioItem value="24" label="Last 24 hours" />
      <GoabRadioItem value="72" label="Last 72 hours" />
    </GoabRadioGroup>
  </GoabFormItem>
</GoabDrawer>

open = false;
assignedTo = "";
takenBy = "";

onClick() {
  this.open = true;
}

onClose() {
  this.open = false;
}

radioOnChange(event: any) {
  console.log(event);
}

onChangeAssignedTo(e: any) {
  this.assignedTo = e.value as string;
}

closeDrawer() {
  this.open = false;
}

<goab-button (onClick)="onClick()">Filters</goab-button>
<goab-drawer
  heading="Filters"
  [open]="open"
  (onClose)="onClose()"
  position="right"
  [actions]="actions"
>
  <goab-form-item label="Entry status">
    <goab-checkbox-list name="entryStatus" (onChange)="onCheckboxChange($event)">
      <goab-checkbox name="draft" text="Draft" value="draft"></goab-checkbox>
      <goab-checkbox name="published" text="Published" value="published"></goab-checkbox>
    </goab-checkbox-list>
  </goab-form-item>
  <goab-form-item label="Assigned to - Region" mt="l">
    <goab-checkbox-list name="region" (onChange)="onCheckboxChange($event)">
      <goab-checkbox name="calgary" text="Calgary" value="calgary"></goab-checkbox>
      <goab-checkbox name="central" text="Central" value="central"></goab-checkbox>
      <goab-checkbox name="edmonton" text="Edmonton" value="edmonton"></goab-checkbox>
      <goab-checkbox name="north" text="North" value="north"></goab-checkbox>
      <goab-checkbox name="south" text="South" value="south"></goab-checkbox>
    </goab-checkbox-list>
  </goab-form-item>
  <goab-form-item label="Assigned to" mt="l">
    <goab-dropdown
      [value]="assignedTo"
      name="assignedToData"
      (onChange)="onChangeAssignedTo($event)"
    >
      <goab-dropdown-item value="1" label="Person 1"></goab-dropdown-item>
      <goab-dropdown-item value="2" label="Person 2"></goab-dropdown-item>
    </goab-dropdown>
  </goab-form-item>
  <goab-form-item label="Date taken" mt="l">
    <goab-radio-group name="dateTaken" (onChange)="radioOnChange($event)">
      <goab-radio-item value="24" label="Last 24 hours"></goab-radio-item>
      <goab-radio-item value="72" label="Last 72 hours"></goab-radio-item>
    </goab-radio-group>
  </goab-form-item>
  <ng-template #actions>
    <goab-button-group alignment="start">
      <goab-button type="primary" size="compact" (onClick)="closeDrawer()"
        >Apply filters</goab-button
      >
      <goab-button type="tertiary" size="compact" (onClick)="closeDrawer()"
        >Cancel</goab-button
      >
    </goab-button-group>
  </ng-template>
</goab-drawer>

const drawer = document.getElementById("filters-drawer");
const openBtn = document.getElementById("open-filters-btn");
const applyBtn = document.getElementById("apply-filters-btn");
const cancelBtn = document.getElementById("cancel-btn");

openBtn.addEventListener("_click", () => {
  drawer.setAttribute("open", "true");
});

drawer.addEventListener("_close", () => {
  drawer.removeAttribute("open");
});

applyBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

cancelBtn.addEventListener("_click", () => {
  drawer.removeAttribute("open");
});

<goa-button version="2" id="open-filters-btn">Filters</goa-button>
<goa-drawer version="2" id="filters-drawer" heading="Filters" position="right">
  <goa-form-item version="2" label="Entry status">
    <goa-checkbox-list name="entryStatus">
      <goa-checkbox version="2" name="draft" text="Draft" value="draft"></goa-checkbox>
      <goa-checkbox
        version="2"
        name="published"
        text="Published"
        value="published"
      ></goa-checkbox>
    </goa-checkbox-list>
  </goa-form-item>
  <goa-form-item version="2" label="Assigned to - Region" mt="l">
    <goa-checkbox-list name="region">
      <goa-checkbox
        version="2"
        name="calgary"
        text="Calgary"
        value="calgary"
      ></goa-checkbox>
      <goa-checkbox
        version="2"
        name="central"
        text="Central"
        value="central"
      ></goa-checkbox>
      <goa-checkbox
        version="2"
        name="edmonton"
        text="Edmonton"
        value="edmonton"
      ></goa-checkbox>
      <goa-checkbox version="2" name="north" text="North" value="north"></goa-checkbox>
      <goa-checkbox version="2" name="south" text="South" value="south"></goa-checkbox>
    </goa-checkbox-list>
  </goa-form-item>
  <goa-form-item version="2" label="Assigned to" mt="l">
    <goa-dropdown version="2" name="assignedTo">
      <goa-dropdown-item value="1" label="Person 1"></goa-dropdown-item>
      <goa-dropdown-item value="2" label="Person 2"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Date taken" mt="l">
    <goa-radio-group version="2" name="dateTaken">
      <goa-radio-item value="24" label="Last 24 hours"></goa-radio-item>
      <goa-radio-item value="72" label="Last 72 hours"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>
  <div slot="actions">
    <goa-button-group alignment="start">
      <goa-button version="2" id="apply-filters-btn" type="primary" size="compact"
        >Apply filters</goa-button
      >
      <goa-button version="2" id="cancel-btn" type="tertiary" size="compact"
        >Cancel</goa-button
      >
    </goa-button-group>
  </div>
</goa-drawer>

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>

form: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    selectOne: ["1"],
  });
}

<goab-form-item label="How do you want to sign in?" [formGroup]="form">
  <goab-radio-group name="selectOne" formControlName="selectOne">
    <goab-radio-item
      value="1"
      label="Sign in as a business"
      [description]="optionOneDescription"
    >
      <ng-template #optionOneDescription>
        Use the account associated with the business
      </ng-template>
    </goab-radio-item>
    <goab-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>
    </goab-radio-item>
  </goab-radio-group>
</goab-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>

Question page

Reveal input based on a selection

const [contactMethod, setContactMethod] = useState("");
const [checkboxSelection, setCheckboxSelection] = useState<string[]>([]);

<GoabFormItem
  label="How would you like to be contacted?"
  helpText="Select one option"
>
  <GoabRadioGroup
    name="contactMethod"
    value={contactMethod}
    onChange={(e) => setContactMethod(e.value)}
  >
    <GoabRadioItem
      value="email"
      label="Email"
      reveal={
        <GoabFormItem label="Email address">
          <GoabInput name="email" onChange={() => {}} value="" />
        </GoabFormItem>
      }
    />
    <GoabRadioItem
      value="phone"
      label="Phone"
      reveal={
        <GoabFormItem label="Phone number">
          <GoabInput name="phoneNumber" onChange={() => {}} value="" />
        </GoabFormItem>
      }
    />
    <GoabRadioItem
      value="text"
      label="Text message"
      reveal={
        <GoabFormItem label="Mobile phone number">
          <GoabInput name="mobilePhoneNumber" onChange={() => {}} value="" />
        </GoabFormItem>
      }
    />
  </GoabRadioGroup>
</GoabFormItem>

<GoabFormItem label="How would you like to be contacted?" mt="xl">
  <GoabCheckboxList
    name="contactMethods"
    value={checkboxSelection}
    onChange={(e) => setCheckboxSelection(e.value || [])}
  >
    <GoabCheckbox
      name="email"
      text="Email"
      value="email"
      reveal={
        <GoabFormItem label="Email address">
          <GoabInput name="email" onChange={() => {}} value="" />
        </GoabFormItem>
      }
    />
    <GoabCheckbox
      name="phone"
      text="Phone"
      value="phone"
      reveal={
        <GoabFormItem label="Phone number">
          <GoabInput name="phoneNumber" onChange={() => {}} value="" />
        </GoabFormItem>
      }
    />
    <GoabCheckbox
      name="text"
      text="Text message"
      value="text"
      reveal={
        <GoabFormItem label="Mobile phone number">
          <GoabInput name="mobilePhoneNumber" onChange={() => {}} value="" />
        </GoabFormItem>
      }
    />
  </GoabCheckboxList>
</GoabFormItem>

form: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    contactMethod: [""],
    phoneNumber: [""],
    emailAddress: [""],
    emailContactMethod: [false],
    phoneContactMethod: [false],
    textContactMethod: [false],
  });
}

<goab-form-item
  [formGroup]="form"
  label="How would you like to be contacted?"
  helpText="Select one option"
>
  <goab-radio-group name="contactMethod" formControlName="contactMethod">
    <goab-radio-item label="Email" value="email" [reveal]="emailReveal">
      <ng-template #emailReveal>
        <goab-form-item label="Email address">
          <goab-input name="email" formControlName="emailAddress"></goab-input>
        </goab-form-item>
      </ng-template>
    </goab-radio-item>
    <goab-radio-item value="phone" label="Phone" [reveal]="phoneReveal">
      <ng-template #phoneReveal>
        <goab-form-item label="Phone number">
          <goab-input name="phone" formControlName="phoneNumber"></goab-input>
        </goab-form-item>
      </ng-template>
    </goab-radio-item>
    <goab-radio-item value="text" label="Text message" [reveal]="textReveal">
      <ng-template #textReveal>
        <goab-form-item label="Mobile phone number">
          <goab-input name="mobile" formControlName="phoneNumber"></goab-input>
        </goab-form-item>
      </ng-template>
    </goab-radio-item>
  </goab-radio-group>
</goab-form-item>

<goab-form-item [formGroup]="form" label="How would you like to be contacted?" mt="xl">
  <goab-checkbox-list name="contactMethods" formControlName="contactMethods">
    <goab-checkbox name="email" text="Email" value="email" [reveal]="checkEmailReveal">
      <ng-template #checkEmailReveal>
        <goab-form-item label="Email address">
          <goab-input name="email" formControlName="emailAddress"></goab-input>
        </goab-form-item>
      </ng-template>
    </goab-checkbox>
    <goab-checkbox name="phone" text="Phone" value="phone" [reveal]="checkPhoneReveal">
      <ng-template #checkPhoneReveal>
        <goab-form-item label="Phone number">
          <goab-input name="phone" formControlName="phoneNumber"></goab-input>
        </goab-form-item>
      </ng-template>
    </goab-checkbox>
    <goab-checkbox
      name="text"
      text="Text message"
      value="text"
      [reveal]="checkTextReveal"
    >
      <ng-template #checkTextReveal>
        <goab-form-item label="Mobile phone number">
          <goab-input name="mobile" formControlName="phoneNumber"></goab-input>
        </goab-form-item>
      </ng-template>
    </goab-checkbox>
  </goab-checkbox-list>
</goab-form-item>

<goa-form-item
  version="2"
  label="How would you like to be contacted?"
  helptext="Select one option"
>
  <goa-radio-group version="2" name="contactMethod" id="radio-contact">
    <goa-radio-item value="email" label="Email">
      <div slot="reveal">
        <goa-form-item version="2" label="Email address">
          <goa-input version="2" name="email"></goa-input>
        </goa-form-item>
      </div>
    </goa-radio-item>
    <goa-radio-item value="phone" label="Phone">
      <div slot="reveal">
        <goa-form-item version="2" label="Phone number">
          <goa-input version="2" name="phone"></goa-input>
        </goa-form-item>
      </div>
    </goa-radio-item>
    <goa-radio-item value="text" label="Text message">
      <div slot="reveal">
        <goa-form-item version="2" label="Mobile phone number">
          <goa-input version="2" name="mobile"></goa-input>
        </goa-form-item>
      </div>
    </goa-radio-item>
  </goa-radio-group>
</goa-form-item>

<goa-form-item version="2" label="How would you like to be contacted?" mt="xl">
  <goa-checkbox-list name="contactMethods">
    <goa-checkbox version="2" name="emailContact" text="Email">
      <div slot="reveal">
        <goa-form-item version="2" label="Email address">
          <goa-input version="2" name="emailInput"></goa-input>
        </goa-form-item>
      </div>
    </goa-checkbox>
    <goa-checkbox version="2" name="phoneContact" text="Phone">
      <div slot="reveal">
        <goa-form-item version="2" label="Phone number">
          <goa-input version="2" name="phoneInput"></goa-input>
        </goa-form-item>
      </div>
    </goa-checkbox>
    <goa-checkbox version="2" name="textContact" text="Text message">
      <div slot="reveal">
        <goa-form-item version="2" label="Mobile phone number">
          <goa-input version="2" name="mobileInput"></goa-input>
        </goa-form-item>
      </div>
    </goa-checkbox>
  </goa-checkbox-list>
</goa-form-item>

Review and action

<GoabGrid minChildWidth="315px">
  <GoabContainer accent="thin" type="non-interactive">
    <GoabText size="heading-m" mt="none" mb="m">
      Appearance details
    </GoabText>
    <GoabGrid minChildWidth="200px" gap="m">
      <GoabBlock direction="column" gap="xs">
        <GoabText size="body-s" color="secondary" mt="none" mb="none">
          Accused name
        </GoabText>
        <GoabText size="body-m" mt="none" mb="none">
          Doe, John Scott
        </GoabText>
      </GoabBlock>

      <GoabBlock direction="column" gap="xs">
        <GoabText size="body-s" color="secondary" mt="none" mb="none">
          Date of birth
        </GoabText>
        <GoabText size="body-m" mt="none" mb="none">
          Mar 14, 2021
        </GoabText>
      </GoabBlock>

      <GoabBlock direction="column" gap="xs">
        <GoabText size="body-s" color="secondary" mt="none" mb="none">
          Court location
        </GoabText>
        <GoabText size="body-m" mt="none" mb="none">
          Calgary
        </GoabText>
      </GoabBlock>

      <GoabBlock direction="column" gap="xs">
        <GoabText size="body-s" color="secondary" mt="none" mb="none">
          Upcoming appearance date{"(s)"}
        </GoabText>
        <GoabText size="body-m" mt="none" mb="none">
          Sep 20, 2021
        </GoabText>
      </GoabBlock>
    </GoabGrid>

    <GoabText size="heading-xs" mt="l" mb="s">
      Docket number{"(s)"} &amp; charges
    </GoabText>
    <GoabContainer type="non-interactive" padding="compact">
      <GoabText size="heading-xs" mt="none" mb="xs">
        {"1) 12345678"}
      </GoabText>
      <GoabText size="body-m" mt="none" mb="none">
        {"CC 334(1) - Theft under $5000"}
      </GoabText>
      <GoabText size="body-m" mt="none" mb="none">
        {"CC 268(1) - Aggravated assault"}
      </GoabText>
    </GoabContainer>

    <GoabContainer type="non-interactive" padding="compact">
      <GoabText size="heading-xs" mt="none" mb="xs">
        {"2) 12345678"}
      </GoabText>
      <GoabText size="body-m" mt="none" mb="none">
        {"CC 334(1) - Theft under $5000"}
      </GoabText>
      <GoabText size="body-m" mt="none" mb="none">
        {"CC 268(1) - Aggravated assault"}
      </GoabText>
    </GoabContainer>
  </GoabContainer>

  <GoabContainer accent="thin" width="content">
    <form>
      <GoabText size="heading-m" mt="none" mb="m">
        Adjournment request
      </GoabText>
      <GoabText size="body-m" mt="none" mb="none">
        Keep track of the individuals who are placed in lodges and may qualify for the
        Lodge Assistance Program subsidy.
      </GoabText>

      <GoabFormItem label="Case history and new request" mt="l">
        <GoabRadioGroup name="case" orientation="horizontal" onChange={() => {}}>
          <GoabRadioItem value="grant" label="Grant" />
          <GoabRadioItem value="deny" label="Deny" />
        </GoabRadioGroup>
      </GoabFormItem>

      <GoabFormItem label="Reason to deny" mt="l">
        <GoabDropdown name="reason" width="100%" onChange={() => {}}>
          <GoabDropdownItem value="1" label="Incomplete Application" />
          <GoabDropdownItem value="2" label="Eligibility Criteria Not Met" />
          <GoabDropdownItem value="3" label="Documentation Verification Failure" />
        </GoabDropdown>
      </GoabFormItem>

      <GoabFormItem label="Message" mt="l">
        <GoabTextArea
          name="message"
          rows={5}
          width="100%"
          value=""
          onChange={() => {}}
        />
      </GoabFormItem>

      <GoabButton mt="xl" onClick={() => {}}>
        Confirm adjournment
      </GoabButton>
    </form>
  </GoabContainer>
</GoabGrid>

form: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    case: [""],
    reason: [""],
    message: [""],
  });
}

onClick(): void {
  console.log("Confirm clicked!");
}

<goab-grid minChildWidth="315px">
  <goab-container accent="thin" type="non-interactive">
    <goab-text size="heading-m" mt="none" mb="m">Appearance details</goab-text>
    <goab-grid minChildWidth="200px" gap="m">
      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none"
          >Accused name</goab-text
        >
        <goab-text size="body-m" mt="none" mb="none">Doe, John Scott</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none"
          >Date of birth</goab-text
        >
        <goab-text size="body-m" mt="none" mb="none">Mar 14, 2021</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none"
          >Court location</goab-text
        >
        <goab-text size="body-m" mt="none" mb="none">Calgary</goab-text>
      </goab-block>

      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none"
          >Upcoming appearance date(s)</goab-text
        >
        <goab-text size="body-m" mt="none" mb="none">Sep 20, 2021</goab-text>
      </goab-block>
    </goab-grid>

    <goab-text size="heading-xs" mt="l" mb="s">Docket number(s) &amp; charges</goab-text>
    <goab-container type="non-interactive" padding="compact">
      <goab-text size="heading-xs" mt="none" mb="xs">1) 12345678</goab-text>
      <goab-text size="body-m" mt="none" mb="none"
        >CC 334(1) - Theft under $5000</goab-text
      >
      <goab-text size="body-m" mt="none" mb="none"
        >CC 268(1) - Aggravated assault</goab-text
      >
    </goab-container>

    <goab-container type="non-interactive" padding="compact">
      <goab-text size="heading-xs" mt="none" mb="xs">2) 12345678</goab-text>
      <goab-text size="body-m" mt="none" mb="none"
        >CC 334(1) - Theft under $5000</goab-text
      >
      <goab-text size="body-m" mt="none" mb="none"
        >CC 268(1) - Aggravated assault</goab-text
      >
    </goab-container>
  </goab-container>

  <goab-container accent="thin" width="content">
    <form [formGroup]="form">
      <goab-text size="heading-m" mt="none" mb="m">Adjournment request</goab-text>
      <goab-text size="body-m" mt="none" mb="none">
        Keep track of the individuals who are placed in lodges and may qualify for the
        Lodge Assistance Program subsidy.
      </goab-text>

      <goab-form-item label="Case history and new request" mt="l">
        <goab-radio-group name="case" orientation="horizontal" formControlName="case">
          <goab-radio-item value="grant" label="Grant"></goab-radio-item>
          <goab-radio-item value="deny" label="Deny"></goab-radio-item>
        </goab-radio-group>
      </goab-form-item>

      <goab-form-item label="Reason to deny" mt="l">
        <goab-dropdown name="reason" width="100%" formControlName="reason">
          <goab-dropdown-item
            value="1"
            label="Incomplete Application"
          ></goab-dropdown-item>
          <goab-dropdown-item
            value="2"
            label="Eligibility Criteria Not Met"
          ></goab-dropdown-item>
          <goab-dropdown-item
            value="3"
            label="Documentation Verification Failure"
          ></goab-dropdown-item>
        </goab-dropdown>
      </goab-form-item>

      <goab-form-item label="Message" mt="l">
        <goab-textarea
          name="message"
          [rows]="5"
          width="100%"
          formControlName="message"
        ></goab-textarea>
      </goab-form-item>

      <goab-button mt="xl" (onClick)="onClick()">Confirm adjournment</goab-button>
    </form>
  </goab-container>
</goab-grid>

document.getElementById("confirm-btn").addEventListener("_click", () => {
  console.log("Confirm clicked!");
});

<goa-grid minchildwidth="315px">
  <goa-container accent="thin" type="non-interactive">
    <goa-text size="heading-m" mt="none" mb="m">Appearance details</goa-text>
    <goa-grid minchildwidth="200px" gap="m">
      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none"
          >Accused name</goa-text
        >
        <goa-text size="body-m" mt="none" mb="none">Doe, John Scott</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none"
          >Date of birth</goa-text
        >
        <goa-text size="body-m" mt="none" mb="none">Mar 14, 2021</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none"
          >Court location</goa-text
        >
        <goa-text size="body-m" mt="none" mb="none">Calgary</goa-text>
      </goa-block>

      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none"
          >Upcoming appearance date(s)</goa-text
        >
        <goa-text size="body-m" mt="none" mb="none">Sep 20, 2021</goa-text>
      </goa-block>
    </goa-grid>

    <goa-text size="heading-xs" mt="l" mb="s">Docket number(s) &amp; charges</goa-text>
    <goa-container type="non-interactive" padding="compact">
      <goa-text size="heading-xs" mt="none" mb="xs">1) 12345678</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goa-text>
      <goa-text size="body-m" mt="none" mb="none"
        >CC 268(1) - Aggravated assault</goa-text
      >
    </goa-container>

    <goa-container type="non-interactive" padding="compact">
      <goa-text size="heading-xs" mt="none" mb="xs">2) 12345678</goa-text>
      <goa-text size="body-m" mt="none" mb="none">CC 334(1) - Theft under $5000</goa-text>
      <goa-text size="body-m" mt="none" mb="none"
        >CC 268(1) - Aggravated assault</goa-text
      >
    </goa-container>
  </goa-container>

  <goa-container accent="thin" width="content">
    <form>
      <goa-text size="heading-m" mt="none" mb="m">Adjournment request</goa-text>
      <goa-text size="body-m" mt="none" mb="none">
        Keep track of the individuals who are placed in lodges and may qualify for the
        Lodge Assistance Program subsidy.
      </goa-text>

      <goa-form-item version="2" label="Case history and new request" mt="l">
        <goa-radio-group version="2" name="case" orientation="horizontal">
          <goa-radio-item value="grant" label="Grant"></goa-radio-item>
          <goa-radio-item value="deny" label="Deny"></goa-radio-item>
        </goa-radio-group>
      </goa-form-item>

      <goa-form-item version="2" label="Reason to deny" mt="l">
        <goa-dropdown version="2" name="reason" width="100%">
          <goa-dropdown-item value="1" label="Incomplete Application"></goa-dropdown-item>
          <goa-dropdown-item
            value="2"
            label="Eligibility Criteria Not Met"
          ></goa-dropdown-item>
          <goa-dropdown-item
            value="3"
            label="Documentation Verification Failure"
          ></goa-dropdown-item>
        </goa-dropdown>
      </goa-form-item>

      <goa-form-item version="2" label="Message" mt="l">
        <goa-textarea version="2" name="message" rows="5" width="100%"></goa-textarea>
      </goa-form-item>

      <goa-button version="2" id="confirm-btn" mt="xl">Confirm adjournment</goa-button>
    </form>
  </goa-container>
</goa-grid>

Set a max width on a long radio item

const [selectOne, setSelectOne] = useState<string>("1");

<form>
  <GoabFormItem label="Select one option">
    <GoabRadioGroup
      name="selectOne"
      value={selectOne}
      onChange={(e: GoabRadioGroupOnChangeDetail) => setSelectOne(e.value)}
    >
      <GoabRadioItem
        value="1"
        label="Option one which has a very long label with lots of text"
        maxWidth="300px"
      />
      <GoabRadioItem value="2" label="Option two" />
      <GoabRadioItem value="3" label="Option three" />
    </GoabRadioGroup>
  </GoabFormItem>
</form>

selectOne = "1";

onRadioChange(event: GoabRadioGroupOnChangeDetail): void {
  this.selectOne = event.value;
}

<form>
  <goab-form-item label="Select one option">
    <goab-radio-group
      name="selectOne"
      [value]="selectOne"
      (onChange)="onRadioChange($event)"
    >
      <goab-radio-item
        value="1"
        label="Option one which has a very long label with lots of text"
        maxWidth="300px"
      >
      </goab-radio-item>
      <goab-radio-item value="2" label="Option two"></goab-radio-item>
      <goab-radio-item value="3" label="Option three"></goab-radio-item>
    </goab-radio-group>
  </goab-form-item>
</form>

document.querySelector("goa-radio-group").addEventListener("_change", (e) => {
  e.target.value = e.detail.value;
});

<form>
  <goa-form-item version="2" label="Select one option">
    <goa-radio-group version="2" name="selectOne" value="1">
      <goa-radio-item
        value="1"
        label="Option one which has a very long label with lots of text"
        max-width="300px"
      >
      </goa-radio-item>
      <goa-radio-item value="2" label="Option two"></goa-radio-item>
      <goa-radio-item value="3" label="Option three"></goa-radio-item>
    </goa-radio-group>
  </goa-form-item>
</form>

States

Submit

When you must disable a button or input:

Provide nearby text explaining what needs to happen first
Consider showing the element enabled with validation on submit instead
Use aria-describedby to link the disabled element to explanatory text

Don't

Don't disable buttons or inputs without explaining why. Disabled controls can be confusing and users may not understand why they can't interact with an element.

Other

The form item automatically associates the label with the input for screen readers, ensuring your form is accessible.

Use a form item wrapper on all inputs to add a label, helper text, error message, and more.

Tip

Use the reveal slot to show additional content when a radio option is selected, like a follow-up question or input field.

Tip

Always use RadioGroup as the parent for sets of RadioItem children. Don't try to build radio button sets manually.

Content

Tip

Use the description prop to add context on radio options where the label alone isn't enough to explain the choice.

Don't

Don't include a period after a radio label.

Usage

Don't

Don't use radios when there are more than 7 options - use a dropdown instead.

Interaction

Don't

Don't nest multiple layers of conditionally revealed questions.

Don't

Don't preselect radio items - users might miss the question or submit the wrong answer.

Layout

Consider horizontal listing when presenting 2-3 short options like Yes/No.

All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

Screen Readers

Warning

When using the reveal slot, set revealAriaLabel so screen readers announce the newly visible content.

View old component docs

Props

Events

Radio Item Props

Radio Item Events

Radio Item ReactNode

Add a record using a drawer

Add and edit lots of filters

Include descriptions for items in a checkbox list

Question page

Reveal input based on a selection

Review and action

Set a max width on a long radio item

States

Other

Content

Usage

Interaction

Layout

Screen Readers

Related components