Drawer

A panel that slides in from the side of the screen to display additional content or actions without navigating away from the current view.

Props

open

any

Whether the drawer is open.

Defaults to false.

position

DrawerPosition

The position of the drawer.

heading

string

The heading text displayed at the top of the drawer.

maxsize

DrawerSize

Sets max height on bottom position, sets width on left and right position.

testId

string

Sets a data-testid attribute for automated testing.

Defaults to drawer.

closeButtonVisibility

visible | hidden

Controls visibility of the close button and header.

Defaults to visible.

version

1 | 2

Defaults to 1.

Events

onClose

(event: Event) => void

_close

CustomEvent

Slots

heading

Named slot for content

actions

Named slot for content

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>
            <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>
      <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>
      <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>
              <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>
      <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>
      <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>

Workspace

Preview not available

No React code available

Other

Don't

Don't use a push drawer for tasks that require the user's full attention. Use a regular drawer instead — it blocks interaction with the background and focuses the user on the task.

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

No accessibility-specific guidelines have been documented for this component yet.

View old component docs