Question page
Form item
Wraps an input control with a text label, requirement label, helper text, and error text.
Props
error
string | React.ReactNode
Error text displayed under the form field. Leave blank to indicate a valid field. Accepts a string or ReactNode for custom error content.
helpText
string | React.ReactNode
Help text displayed under the form field to provide additional explanation. Accepts a string or ReactNode for custom help content.
id
string
Sets the id attribute on the form item element.
label
string
Creates a label for the form item.
labelSize
GoabFormItemLabelSize
Sets the label size. 'regular' for standard, 'large' for emphasis.
Defaults to
regular.
maxWidth
string
Sets the maximum width of the form item.
Defaults to
none.
name
string
Overrides the label value within the form-summary to provide a shorter description. For public-form use only.
requirement
GoabFormItemRequirement
Marks the field with an optional or required label indicator.
testId
string
Sets a data-testid attribute for automated testing.
type
GoabFormItemType
Specifies the input type for appropriate message spacing. Used with checkbox-list or radio-group.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
ReactNode
error
ReactNode
Error text displayed under the form field. Leave blank to indicate a valid field. Accepts a string or ReactNode for custom error content.
helpText
ReactNode
Help text displayed under the form field to provide additional explanation. Accepts a string or ReactNode for custom help content.
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>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>const [open, setOpen] = useState(false);
const [type, setType] = useState<string>();
const [name, setName] = useState<string>();
const [description, setDescription] = useState<string>();<GoabButton type="tertiary" leadingIcon="add" onClick={() => setOpen(true)}>
Add another item
</GoabButton>
<GoabModal
heading="Add a new item"
open={open}
actions={
<GoabButtonGroup alignment="end">
<GoabButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
Cancel
</GoabButton>
<GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
Save new item
</GoabButton>
</GoabButtonGroup>
}
>
<p>Fill in the information to create a new item</p>
<GoabFormItem label="Type" mt="l">
<GoabDropdown onChange={(e) => setType(e.value)} value={type}>
<GoabDropdownItem value="1" label="Option 1" />
<GoabDropdownItem value="2" label="Option 2" />
</GoabDropdown>
</GoabFormItem>
<GoabFormItem label="Name" mt="l">
<GoabInput
onChange={(e) => setName(e.value)}
value={name}
name="name"
width="100%"
/>
</GoabFormItem>
<GoabFormItem label="Description" mt="l">
<GoabTextArea
name="description"
rows={3}
width="100%"
onChange={(e) => setDescription(e.value)}
value={description}
/>
</GoabFormItem>
</GoabModal>open = false;
type: string | undefined = "";
name = "";
description = "";
toggleModal() {
this.open = !this.open;
}
updateType(event: any) {
this.type = event.value;
}
updateName(event: any) {
this.name = event.value;
}
updateDescription(event: any) {
this.description = event.value;
}<goab-button type="tertiary" leadingIcon="add" (onClick)="toggleModal()"
>Add another item</goab-button
>
<goab-modal
[open]="open"
(onClose)="toggleModal()"
heading="Add a new item"
[actions]="actions"
>
<p>Fill in the information to create a new item</p>
<goab-form-item label="Type" mt="l">
<goab-dropdown (onChange)="updateType($event)" [value]="type">
<goab-dropdown-item value="1" label="Option 1"></goab-dropdown-item>
<goab-dropdown-item value="2" label="Option 2"></goab-dropdown-item>
</goab-dropdown>
</goab-form-item>
<goab-form-item label="Name" mt="l">
<goab-input
name="name"
width="100%"
(onChange)="updateName($event)"
[value]="name"
></goab-input>
</goab-form-item>
<goab-form-item label="Description" mt="l">
<goab-textarea
name="description"
width="100%"
[rows]="3"
(onChange)="updateDescription($event)"
[value]="description"
></goab-textarea>
</goab-form-item>
<ng-template #actions>
<goab-button-group alignment="end">
<goab-button type="tertiary" size="compact" (onClick)="toggleModal()"
>Cancel</goab-button
>
<goab-button type="primary" size="compact" (onClick)="toggleModal()"
>Save new item</goab-button
>
</goab-button-group>
</ng-template>
</goab-modal>const modal = document.getElementById("add-item-modal");
const openBtn = document.getElementById("open-modal-btn");
const cancelBtn = document.getElementById("cancel-btn");
const saveBtn = document.getElementById("save-btn");
openBtn.addEventListener("_click", () => {
modal.setAttribute("open", "true");
});
modal.addEventListener("_close", () => {
modal.removeAttribute("open");
});
cancelBtn.addEventListener("_click", () => {
modal.removeAttribute("open");
});
saveBtn.addEventListener("_click", () => {
modal.removeAttribute("open");
});<goa-button version="2" id="open-modal-btn" type="tertiary" leadingicon="add"
>Add another item</goa-button
>
<goa-modal version="2" id="add-item-modal" heading="Add a new item">
<p>Fill in the information to create a new item</p>
<goa-form-item version="2" label="Type" mt="l">
<goa-dropdown version="2" id="type-dropdown">
<goa-dropdown-item value="1" label="Option 1"></goa-dropdown-item>
<goa-dropdown-item value="2" label="Option 2"></goa-dropdown-item>
</goa-dropdown>
</goa-form-item>
<goa-form-item version="2" label="Name" mt="l">
<goa-input version="2" name="name" width="100%" id="name-input"></goa-input>
</goa-form-item>
<goa-form-item version="2" label="Description" mt="l">
<goa-textarea
version="2"
name="description"
width="100%"
rows="3"
id="description-textarea"
></goa-textarea>
</goa-form-item>
<div slot="actions">
<goa-button-group alignment="end">
<goa-button version="2" id="cancel-btn" type="tertiary" size="compact"
>Cancel</goa-button
>
<goa-button version="2" id="save-btn" type="primary" size="compact"
>Save new item</goa-button
>
</goa-button-group>
</div>
</goa-modal>Ask a user for a birthday
const [birthdate, setBirthdate] = useState<Date | undefined>(undefined);<GoabFormItem label="What is your date of birth?">
<GoabDatePicker
name="birthdate"
type="input"
value={birthdate}
onChange={(e) => setBirthdate(e.value)}
/>
</GoabFormItem>birthdate: Date | undefined;
onDateChange(event: GoabDatePickerOnChangeDetail): void {
this.birthdate = event.valueStr ? new Date(event.valueStr) : undefined;
}<goab-form-item label="What is your date of birth?">
<goab-date-picker
name="birthdate"
type="input"
[value]="birthdate"
(onChange)="onDateChange($event)"
>
</goab-date-picker>
</goab-form-item>const datePicker = document.getElementById("birthdate");
datePicker.addEventListener("_change", (e) => {
console.log("Selected date:", e.detail.value);
});<goa-form-item version="2" label="What is your date of birth?">
<goa-date-picker
version="2"
name="birthdate"
type="input"
id="birthdate"
></goa-date-picker>
</goa-form-item>Ask a long answer question with a maximum word count
const [value, setValue] = useState("");<GoabFormItem
label="Provide more detail"
helpText="Maximum 500 words. Do not include personal or financial information."
>
<GoabTextArea
name="program"
onChange={(e) => setValue(e.value)}
value={value}
width="100%"
rows={6}
maxCount={500}
countBy="word"
/>
</GoabFormItem>form!: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
program: [""],
});
}<goab-form-item
label="Provide more detail"
helpText="Maximum 500 words. Do not include personal or financial information."
>
<goab-textarea
name="program"
[formControl]="form.controls.program"
width="100%"
[rows]="6"
[maxCount]="500"
countBy="word"
>
</goab-textarea>
</goab-form-item>document.getElementById("program-textarea")?.addEventListener("_change", (e) => {
console.log("Value:", e.detail.value);
});<goa-form-item
version="2"
label="Provide more detail"
helptext="Maximum 500 words. Do not include personal or financial information."
>
<goa-textarea
version="2"
name="program"
id="program-textarea"
width="100%"
rows="6"
maxcount="500"
countby="word"
>
</goa-textarea>
</goa-form-item>const [address, setAddress] = useState("");
const [suite, setSuite] = useState("");
const [city, setCity] = useState("");
const [province, setProvince] = useState("");
const [postalCode, setPostalCode] = useState("");<GoabText size="heading-l" mt="none" mb="xl">
What is your address?
</GoabText>
<GoabFormItem label="Street Address">
<GoabInput
name="address"
type="text"
value={address}
onChange={(e) => setAddress(e.value)}
width="100%"
/>
</GoabFormItem>
<GoabFormItem label="Suite or unit #" mt="l">
<GoabInput
name="suite"
type="text"
value={suite}
onChange={(e) => setSuite(e.value)}
width="100%"
/>
</GoabFormItem>
<GoabFormItem label="City or town" mt="l">
<GoabInput
name="city"
type="text"
value={city}
onChange={(e) => setCity(e.value)}
width="100%"
/>
</GoabFormItem>
<GoabBlock direction="row" gap="l" mt="l">
<GoabFormItem label="Province or territory">
<GoabDropdown
onChange={(e) => setProvince(e.value ?? "")}
name="province"
value={province}
width="100%"
>
<GoabDropdownItem label="Alberta" value="AB" />
<GoabDropdownItem label="British Columbia" value="BC" />
<GoabDropdownItem label="Manitoba" value="MB" />
<GoabDropdownItem label="New Brunswick" value="NB" />
<GoabDropdownItem label="Newfoundland and Labrador" value="NL" />
<GoabDropdownItem label="Northwest Territories" value="NT" />
<GoabDropdownItem label="Nova Scotia" value="NS" />
<GoabDropdownItem label="Nunavut" value="NU" />
<GoabDropdownItem label="Ontario" value="ON" />
<GoabDropdownItem label="Prince Edward Island" value="PE" />
<GoabDropdownItem label="Quebec" value="QC" />
<GoabDropdownItem label="Saskatchewan" value="SK" />
<GoabDropdownItem label="Yukon" value="YT" />
</GoabDropdown>
</GoabFormItem>
<GoabFormItem label="Postal Code">
<GoabInput
name="postalCode"
type="text"
value={postalCode}
onChange={(e) => setPostalCode(e.value)}
width="7ch"
/>
</GoabFormItem>
</GoabBlock>
<GoabButtonGroup alignment="start" mt="2xl">
<GoabButton type="primary" onClick={() => {}}>
Save and continue
</GoabButton>
<GoabButton type="secondary" onClick={() => {}}>
Cancel
</GoabButton>
</GoabButtonGroup>form!: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
address: [""],
suite: [""],
city: [""],
province: [""],
postalCode: [""],
});
}
onClick() {
// Handle form submission
}<goab-text size="heading-l" mt="none" mb="xl">What is your address?</goab-text>
<goab-form-item label="Street Address">
<goab-input
name="address"
type="text"
[formControl]="form.controls.address"
width="100%"
></goab-input>
</goab-form-item>
<goab-form-item label="Suite or unit #" mt="l">
<goab-input
name="suite"
type="text"
[formControl]="form.controls.suite"
width="100%"
></goab-input>
</goab-form-item>
<goab-form-item label="City or town" mt="l">
<goab-input
name="city"
type="text"
[formControl]="form.controls.city"
width="100%"
></goab-input>
</goab-form-item>
<goab-block direction="row" gap="l" mt="l">
<goab-form-item label="Province or territory">
<goab-dropdown name="province" [formControl]="form.controls.province" width="100%">
<goab-dropdown-item label="Alberta" value="AB"></goab-dropdown-item>
<goab-dropdown-item label="British Columbia" value="BC"></goab-dropdown-item>
<goab-dropdown-item label="Manitoba" value="MB"></goab-dropdown-item>
<goab-dropdown-item label="New Brunswick" value="NB"></goab-dropdown-item>
<goab-dropdown-item
label="Newfoundland and Labrador"
value="NL"
></goab-dropdown-item>
<goab-dropdown-item label="Northwest Territories" value="NT"></goab-dropdown-item>
<goab-dropdown-item label="Nova Scotia" value="NS"></goab-dropdown-item>
<goab-dropdown-item label="Nunavut" value="NU"></goab-dropdown-item>
<goab-dropdown-item label="Ontario" value="ON"></goab-dropdown-item>
<goab-dropdown-item label="Prince Edward Island" value="PE"></goab-dropdown-item>
<goab-dropdown-item label="Quebec" value="QC"></goab-dropdown-item>
<goab-dropdown-item label="Saskatchewan" value="SK"></goab-dropdown-item>
<goab-dropdown-item label="Yukon" value="YT"></goab-dropdown-item>
</goab-dropdown>
</goab-form-item>
<goab-form-item label="Postal Code">
<goab-input
name="postalCode"
type="text"
[formControl]="form.controls.postalCode"
width="7ch"
></goab-input>
</goab-form-item>
</goab-block>
<goab-button-group alignment="start" mt="2xl">
<goab-button type="primary" (onClick)="onClick()">Save and continue</goab-button>
<goab-button type="secondary" (onClick)="onClick()">Cancel</goab-button>
</goab-button-group>document.getElementById("save-btn")?.addEventListener("_click", () => {
console.log("Form submitted");
});<goa-text size="heading-l" mt="none" mb="xl">What is your address?</goa-text>
<goa-form-item version="2" label="Street Address">
<goa-input
version="2"
name="address"
type="text"
width="100%"
id="address-input"
></goa-input>
</goa-form-item>
<goa-form-item version="2" label="Suite or unit #" mt="l">
<goa-input
version="2"
name="suite"
type="text"
width="100%"
id="suite-input"
></goa-input>
</goa-form-item>
<goa-form-item version="2" label="City or town" mt="l">
<goa-input version="2" name="city" type="text" width="100%" id="city-input"></goa-input>
</goa-form-item>
<goa-block direction="row" gap="l" mt="l">
<goa-form-item version="2" label="Province or territory">
<goa-dropdown version="2" name="province" id="province-dropdown" width="100%">
<goa-dropdown-item label="Alberta" value="AB"></goa-dropdown-item>
<goa-dropdown-item label="British Columbia" value="BC"></goa-dropdown-item>
<goa-dropdown-item label="Manitoba" value="MB"></goa-dropdown-item>
<goa-dropdown-item label="New Brunswick" value="NB"></goa-dropdown-item>
<goa-dropdown-item label="Newfoundland and Labrador" value="NL"></goa-dropdown-item>
<goa-dropdown-item label="Northwest Territories" value="NT"></goa-dropdown-item>
<goa-dropdown-item label="Nova Scotia" value="NS"></goa-dropdown-item>
<goa-dropdown-item label="Nunavut" value="NU"></goa-dropdown-item>
<goa-dropdown-item label="Ontario" value="ON"></goa-dropdown-item>
<goa-dropdown-item label="Prince Edward Island" value="PE"></goa-dropdown-item>
<goa-dropdown-item label="Quebec" value="QC"></goa-dropdown-item>
<goa-dropdown-item label="Saskatchewan" value="SK"></goa-dropdown-item>
<goa-dropdown-item label="Yukon" value="YT"></goa-dropdown-item>
</goa-dropdown>
</goa-form-item>
<goa-form-item version="2" label="Postal Code">
<goa-input
version="2"
name="postalCode"
type="text"
width="7ch"
id="postal-input"
></goa-input>
</goa-form-item>
</goa-block>
<goa-button-group alignment="start" mt="2xl">
<goa-button version="2" type="primary" id="save-btn">Save and continue</goa-button>
<goa-button version="2" type="secondary" id="cancel-btn">Cancel</goa-button>
</goa-button-group>const [bandNo, setBandNo] = useState("");
const [family, setFamily] = useState("");
const [position, setPosition] = useState("");<GoabFormItem label="Indian registration number" labelSize="large">
<GoabBlock gap="m" direction="row">
<GoabFormItem label="Band #" helpText="3 digits">
<GoabInput
onChange={(e) => setBandNo(e.value)}
value={bandNo}
name="bandNo"
width="88px"
maxLength={3}
/>
</GoabFormItem>
<GoabFormItem label="Family" helpText="Up to 5 digits">
<GoabInput
onChange={(e) => setFamily(e.value)}
value={family}
name="family"
width="105px"
maxLength={5}
/>
</GoabFormItem>
<GoabFormItem label="Position" helpText="2 digits">
<GoabInput
onChange={(e) => setPosition(e.value)}
value={position}
name="position"
width="71px"
maxLength={2}
/>
</GoabFormItem>
</GoabBlock>
</GoabFormItem>form!: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
bandNo: [""],
family: [""],
position: [""],
});
}<form [formGroup]="form">
<goab-form-item label="Indian registration number" labelSize="large">
<goab-block gap="m" direction="row">
<goab-form-item label="Band #" helpText="3 digits">
<goab-input formControlName="bandNo" name="bandNo" width="88px" [maxLength]="3">
</goab-input>
</goab-form-item>
<goab-form-item label="Family" helpText="Up to 5 digits">
<goab-input formControlName="family" name="family" width="105px" [maxLength]="5">
</goab-input>
</goab-form-item>
<goab-form-item label="Position" helpText="2 digits">
<goab-input
formControlName="position"
name="position"
width="71px"
[maxLength]="2"
>
</goab-input>
</goab-form-item>
</goab-block>
</goab-form-item>
</form>["band-input", "family-input", "position-input"].forEach((id) => {
document.getElementById(id)?.addEventListener("_change", (e) => {
console.log(`${id}:`, e.detail.value);
});
});<goa-form-item version="2" label="Indian registration number" labelsize="large">
<goa-block gap="m" direction="row">
<goa-form-item version="2" label="Band #" helptext="3 digits">
<goa-input version="2" name="bandNo" id="band-input" width="88px" maxlength="3">
</goa-input>
</goa-form-item>
<goa-form-item version="2" label="Family" helptext="Up to 5 digits">
<goa-input version="2" name="family" id="family-input" width="105px" maxlength="5">
</goa-input>
</goa-form-item>
<goa-form-item version="2" label="Position" helptext="2 digits">
<goa-input
version="2"
name="position"
id="position-input"
width="71px"
maxlength="2"
>
</goa-input>
</goa-form-item>
</goa-block>
</goa-form-item>const [bankNumber, setBankNumber] = useState("");
const [transitNumber, setTransitNumber] = useState("");
const [accountNumber, setAccountNumber] = useState("");<GoabText tag="h1" size="heading-l" mt="none" mb="m">
Direct deposit information
</GoabText>
<GoabText tag="p" mb="xl">
Find this information on your bank's website or on your personal cheques. Contact
your bank if you can't find this information.
</GoabText>
<form>
<GoabFormItem label="Bank or Institution number" helpText="3-4 digits in length">
<GoabInput
maxLength={4}
name="bankNumber"
onChange={(e) => setBankNumber(e.value)}
value={bankNumber}
ariaLabel="bankNumber"
width="88px"
/>
</GoabFormItem>
<GoabFormItem
label="Branch or Transit number"
helpText="5 digits in length"
mt="l"
>
<GoabInput
maxLength={5}
name="transitNumber"
onChange={(e) => setTransitNumber(e.value)}
value={transitNumber}
ariaLabel="transitNumber"
width="143px"
/>
</GoabFormItem>
<GoabFormItem label="Account number" helpText="3-12 digits in length" mt="l">
<GoabInput
maxLength={12}
name="accountNumber"
value={accountNumber}
onChange={(e) => setAccountNumber(e.value)}
ariaLabel="accountNumber"
/>
</GoabFormItem>
</form>
<GoabDetails
heading="Where can I find this information on a personal cheque?"
mt="l"
>
<GoabText tag="p" mb="m">
Below is an example of where you can find the required bank information on a
personal cheque.
</GoabText>
<img
src="https://design.alberta.ca/images/details-demo.jpg"
alt="Cheque example showing bank information locations"
/>
</GoabDetails>
<GoabButton type="submit" mt="2xl">
Save and continue
</GoabButton>form!: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
bankNumber: [""],
transitNumber: [""],
accountNumber: [""],
});
}<goab-text tag="h1" size="heading-l" mt="none" mb="m"
>Direct deposit information</goab-text
>
<goab-text tag="p" mb="xl">
Find this information on your bank's website or on your personal cheques. Contact your
bank if you can't find this information.
</goab-text>
<form [formGroup]="form">
<goab-form-item label="Bank or Institution number" helpText="3-4 digits in length">
<goab-input
[maxLength]="4"
name="bankNumber"
formControlName="bankNumber"
ariaLabel="bankNumber"
width="88px"
>
</goab-input>
</goab-form-item>
<goab-form-item label="Branch or Transit number" helpText="5 digits in length" mt="l">
<goab-input
[maxLength]="5"
name="transitNumber"
formControlName="transitNumber"
ariaLabel="transitNumber"
width="143px"
>
</goab-input>
</goab-form-item>
<goab-form-item label="Account number" helpText="3-12 digits in length" mt="l">
<goab-input
[maxLength]="12"
name="accountNumber"
formControlName="accountNumber"
ariaLabel="accountNumber"
>
</goab-input>
</goab-form-item>
</form>
<goab-details heading="Where can I find this information on a personal cheque?" mt="l">
<goab-text tag="p" mb="m"
>Below is an example of where you can find the required bank information on a personal
cheque.</goab-text
>
<img src="https://design.alberta.ca/images/details-demo.jpg" alt="Cheque example" />
</goab-details>
<goab-button type="submit" mt="2xl" (onClick)="onSubmit()">
Save and continue
</goab-button>["bank-number-input", "transit-number-input", "account-number-input"].forEach((id) => {
document.getElementById(id)?.addEventListener("_change", (e) => {
console.log(`${id}:`, e.detail.value);
});
});<goa-text as="h1" size="heading-l" mt="none" mb="m">Direct deposit information</goa-text>
<goa-text as="p" mb="xl">
Find this information on your bank's website or on your personal cheques. Contact your
bank if you can't find this information.
</goa-text>
<form>
<goa-form-item
version="2"
label="Bank or Institution number"
helptext="3-4 digits in length"
>
<goa-input
version="2"
maxlength="4"
name="bankNumber"
id="bank-number-input"
aria-label="bankNumber"
width="88px"
>
</goa-input>
</goa-form-item>
<goa-form-item
version="2"
label="Branch or Transit number"
helptext="5 digits in length"
mt="l"
>
<goa-input
version="2"
maxlength="5"
name="transitNumber"
id="transit-number-input"
aria-label="transitNumber"
width="143px"
>
</goa-input>
</goa-form-item>
<goa-form-item
version="2"
label="Account number"
helptext="3-12 digits in length"
mt="l"
>
<goa-input
version="2"
maxlength="12"
name="accountNumber"
id="account-number-input"
aria-label="accountNumber"
>
</goa-input>
</goa-form-item>
</form>
<goa-details heading="Where can I find this information on a personal cheque?" mt="l">
<goa-text as="p" mb="m"
>Below is an example of where you can find the required bank information on a personal
cheque.</goa-text
>
<img src="https://design.alberta.ca/images/details-demo.jpg" alt="Cheque example" />
</goa-details>
<goa-button version="2" id="submit-btn" type="submit" mt="2xl">
Save and continue
</goa-button>Ask a user for dollar amounts
const [tuitionAmount, setTuitionAmount] = useState("");
const [suppliesAmount, setSuppliesAmount] = useState("");
const [othersAmount, setOthersAmount] = useState("");<GoabFormItem label="Tuition">
<GoabInput
onChange={(e) => setTuitionAmount(e.value)}
value={tuitionAmount}
name="tuitionAmount"
leadingContent="$"
/>
</GoabFormItem>
<GoabFormItem label="Books/Supplies/Instruments" mt="l">
<GoabInput
onChange={(e) => setSuppliesAmount(e.value)}
value={suppliesAmount}
name="suppliesAmount"
leadingContent="$"
/>
</GoabFormItem>
<GoabFormItem label="Other costs" mt="l">
<GoabInput
onChange={(e) => setOthersAmount(e.value)}
value={othersAmount}
name="othersAmount"
leadingContent="$"
/>
</GoabFormItem>costFormGroup = new FormGroup({
tuitionFeeAmount: new FormControl(""),
suppliesAmount: new FormControl(""),
othersAmount: new FormControl(""),
});<form [formGroup]="costFormGroup">
<goab-form-item label="Tuition">
<goab-input
name="tuition"
formControlName="tuitionFeeAmount"
leadingContent="$"
></goab-input>
</goab-form-item>
<goab-form-item label="Books/Supplies/Instruments" mt="l">
<goab-input
name="book"
formControlName="suppliesAmount"
leadingContent="$"
></goab-input>
</goab-form-item>
<goab-form-item label="Other costs" mt="l">
<goab-input
name="others"
formControlName="othersAmount"
leadingContent="$"
></goab-input>
</goab-form-item>
</form>["tuition-input", "supplies-input", "others-input"].forEach((id) => {
document.getElementById(id)?.addEventListener("_change", (e) => {
console.log(`${id}:`, e.detail.value);
});
});<form>
<goa-form-item version="2" label="Tuition">
<goa-input version="2" name="tuition" id="tuition-input">
<div slot="leadingContent">$</div>
</goa-input>
</goa-form-item>
<goa-form-item version="2" label="Books/Supplies/Instruments" mt="l">
<goa-input version="2" name="book" id="supplies-input">
<div slot="leadingContent">$</div>
</goa-input>
</goa-form-item>
<goa-form-item version="2" label="Other costs" mt="l">
<goa-input version="2" name="others" id="others-input">
<div slot="leadingContent">$</div>
</goa-input>
</goa-form-item>
</form>const [open, setOpen] = useState(false);
const [effectiveDate, setEffectiveDate] = useState<Date | undefined>(new Date());
const onChangeEffectiveDate = (detail: GoabDatePickerOnChangeDetail) => {
setEffectiveDate(detail.value as Date);
};<GoabButton onClick={() => setOpen(true)}>Save and continue</GoabButton>
<GoabModal
heading="Address has changed"
open={open}
onClose={() => setOpen(false)}
actions={
<GoabButtonGroup alignment="end">
<GoabButton type="secondary" size="compact" onClick={() => setOpen(false)}>
Undo address change
</GoabButton>
<GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
Confirm
</GoabButton>
</GoabButtonGroup>
}
>
<GoabContainer
type="non-interactive"
accent="filled"
padding="compact"
width="full"
>
<GoabText tag="h4" mt="none" mb="s">
Before
</GoabText>
<GoabText mt="none">123456 78 Ave NW, Edmonton, Alberta</GoabText>
<GoabText tag="h4" mt="none" mb="s">
After
</GoabText>
<GoabText mt="none" mb="none">
881 12 Ave NW, Edmonton, Alberta
</GoabText>
</GoabContainer>
<GoabFormItem label="Effective date" mt="l">
<GoabDatePicker
onChange={onChangeEffectiveDate}
name="effectiveDate"
value={effectiveDate}
/>
</GoabFormItem>
</GoabModal>open = false;
effectiveDate = new Date();
toggleModal(): void {
this.open = !this.open;
}
onChangeEffectiveDate(event: GoabDatePickerOnChangeDetail): void {
this.effectiveDate = event.value as Date;
}<goab-button (onClick)="toggleModal()">Save and continue</goab-button>
<goab-modal
[open]="open"
(onClose)="toggleModal()"
heading="Address has changed"
[actions]="actions"
>
<goab-container type="non-interactive" accent="filled" padding="compact" width="full">
<goab-text tag="h4" mt="none" mb="s">Before</goab-text>
<goab-text mt="none">123456 78 Ave NW, Edmonton, Alberta</goab-text>
<goab-text tag="h4" mt="none" mb="s">After</goab-text>
<goab-text mt="none" mb="none">881 12 Ave NW, Edmonton, Alberta</goab-text>
</goab-container>
<goab-form-item label="Effective date" mt="l">
<goab-date-picker
(onChange)="onChangeEffectiveDate($event)"
name="effectiveDate"
[value]="effectiveDate"
></goab-date-picker>
</goab-form-item>
<ng-template #actions>
<goab-button-group alignment="end">
<goab-button type="secondary" size="compact" (onClick)="toggleModal()">
Undo address change
</goab-button>
<goab-button type="primary" size="compact" (onClick)="toggleModal()">
Confirm
</goab-button>
</goab-button-group>
</ng-template>
</goab-modal>const modal = document.getElementById("change-modal");
const openBtn = document.getElementById("open-modal-btn");
const undoBtn = document.getElementById("undo-btn");
const confirmBtn = document.getElementById("confirm-btn");
const datePicker = document.getElementById("effective-date");
let effectiveDate = new Date();
datePicker.setAttribute("value", effectiveDate.toISOString());
openBtn.addEventListener("_click", () => {
modal.setAttribute("open", "true");
});
undoBtn.addEventListener("_click", () => {
modal.removeAttribute("open");
});
confirmBtn.addEventListener("_click", () => {
modal.removeAttribute("open");
});
modal.addEventListener("_close", () => {
modal.removeAttribute("open");
});
datePicker.addEventListener("_change", (e) => {
effectiveDate = e.detail.value;
});<goa-button version="2" id="open-modal-btn">Save and continue</goa-button>
<goa-modal version="2" id="change-modal" heading="Address has changed">
<goa-container type="non-interactive" accent="filled" padding="compact" width="full">
<goa-text as="h4" mt="none" mb="s">Before</goa-text>
<goa-text mt="none">123456 78 Ave NW, Edmonton, Alberta</goa-text>
<goa-text as="h4" mt="none" mb="s">After</goa-text>
<goa-text mt="none" mb="none">881 12 Ave NW, Edmonton, Alberta</goa-text>
</goa-container>
<goa-form-item version="2" label="Effective date" mt="l">
<goa-date-picker
version="2"
id="effective-date"
name="effectiveDate"
></goa-date-picker>
</goa-form-item>
<div slot="actions">
<goa-button-group alignment="end">
<goa-button version="2" type="secondary" size="compact" id="undo-btn">
Undo address change
</goa-button>
<goa-button version="2" type="primary" size="compact" id="confirm-btn">
Confirm
</goa-button>
</goa-button-group>
</div>
</goa-modal>Disabled button with a required field
const [inputValue, setInputValue] = useState("");
const handleInputChange = (detail: GoabInputOnChangeDetail) => {
setInputValue(detail.value);
};
const handleConfirm = () => {
// Handle form submission
console.log("Form submitted with:", inputValue);
};
const handleCancel = () => {
// Handle cancellation
setInputValue("");
};<form>
<GoabFormItem label="Name" requirement="required">
<GoabInput
name="input"
type="text"
onChange={handleInputChange}
value={inputValue}
width="100%"
/>
</GoabFormItem>
<GoabButtonGroup alignment="start" mt="xl">
<GoabButton disabled={inputValue.trim() === ""} onClick={handleConfirm}>
Confirm
</GoabButton>
<GoabButton type="secondary" onClick={handleCancel}>
Cancel
</GoabButton>
</GoabButtonGroup>
</form>inputValue = "";
onInputChange(detail: GoabInputOnChangeDetail): void {
this.inputValue = detail.value;
}
onConfirm(): void {
// Handle form submission
console.log("Form submitted with:", this.inputValue);
}
onCancel(): void {
// Handle cancellation
this.inputValue = "";
}
get isDisabled(): boolean {
return this.inputValue.trim() === "";
}<form>
<goab-form-item label="Name" requirement="required">
<goab-input
name="input"
type="text"
(onChange)="onInputChange($event)"
[value]="inputValue"
width="100%"
>
</goab-input>
</goab-form-item>
<goab-button-group alignment="start" mt="xl">
<goab-button [disabled]="isDisabled" (onClick)="onConfirm()"> Confirm </goab-button>
<goab-button type="secondary" (onClick)="onCancel()"> Cancel </goab-button>
</goab-button-group>
</form>const nameInput = document.getElementById("name-input");
const confirmBtn = document.getElementById("confirm-btn");
const cancelBtn = document.getElementById("cancel-btn");
nameInput.addEventListener("_change", (e) => {
const value = e.detail.value.trim();
if (value === "") {
confirmBtn.setAttribute("disabled", "true");
} else {
confirmBtn.removeAttribute("disabled");
}
});
confirmBtn.addEventListener("_click", () => {
console.log("Form submitted with:", nameInput.value);
});
cancelBtn.addEventListener("_click", () => {
nameInput.value = "";
confirmBtn.setAttribute("disabled", "true");
});<form id="required-field-form">
<goa-form-item version="2" label="Name" requirement="required">
<goa-input
version="2"
id="name-input"
name="input"
type="text"
width="100%"
></goa-input>
</goa-form-item>
<goa-button-group alignment="start" mt="xl">
<goa-button version="2" id="confirm-btn" disabled="true">Confirm</goa-button>
<goa-button version="2" id="cancel-btn" type="secondary">Cancel</goa-button>
</goa-button-group>
</form>Dynamically change items in a dropdown list
const [children, setChildren] = useState<string[]>([]);
const parents = ["All", "Big", "Small"];
const childrenAll = ["Bus", "Elephant", "Key", "Pen", "Watch", "Truck"];
const childrenBig = ["Elephant", "Truck", "Bus"];
const childrenSmall = ["Key", "Pen", "Watch"];
const loadItems = (value: string) => {
if (value === "All") setChildren(childrenAll);
else if (value === "Big") setChildren(childrenBig);
else setChildren(childrenSmall);
};
const logSelection = () => {
console.log("Item selected");
};<GoabFormItem
label="Size"
requirement="optional"
helpText="Choose the size to change the list below"
>
<GoabDropdown
name="parent"
placeholder="Select a value"
onChange={(event: GoabDropdownOnChangeDetail) =>
loadItems(event.value as string)
}
>
{parents.map((parent) => (
<GoabDropdownItem key={parent} value={parent} label={parent} />
))}
</GoabDropdown>
</GoabFormItem>
<GoabFormItem label="Items" requirement="optional" mt="xl">
<GoabDropdown
name="children"
placeholder="Select a value"
onChange={logSelection}
>
{children.map((child) => (
<GoabDropdownItem key={child} value={child} label={child} mountType="reset" />
))}
</GoabDropdown>
</GoabFormItem><div [formGroup]="changeForm" style="padding: 40px">
<goab-form-item
label="Size"
requirement="optional"
helpText="Choose the size to change the list below"
>
<goab-dropdown
formControlName="parentDropdown"
placeholder="Select a value"
name="parent"
>
@for (parent of parents; track parent) {
<goab-dropdown-item [value]="parent" [label]="parent" />
}
</goab-dropdown>
</goab-form-item>
<goab-form-item label="Items" requirement="optional" mt="xl">
<goab-dropdown
formControlName="childDropdown"
placeholder="Select a value"
name="children"
>
<ng-container *ngIf="children.length > 0">
@for (child of children; track child) {
<goab-dropdown-item [value]="child" [label]="child" [mountType]="'reset'" />
}
</ng-container>
</goab-dropdown>
</goab-form-item>
</div>const parentDropdown = document.getElementById("parent-dropdown");
const childDropdown = document.getElementById("child-dropdown");
const childrenAll = ["Bus", "Elephant", "Key", "Pen", "Watch", "Truck"];
const childrenBig = ["Elephant", "Truck", "Bus"];
const childrenSmall = ["Key", "Pen", "Watch"];
function updateChildren(items) {
childDropdown.innerHTML = "";
items.forEach((item) => {
const dropdownItem = document.createElement("goa-dropdown-item");
dropdownItem.setAttribute("value", item);
dropdownItem.setAttribute("label", item);
dropdownItem.setAttribute("mount", "reset");
childDropdown.appendChild(dropdownItem);
});
}
parentDropdown.addEventListener("_change", (e) => {
const value = e.detail.value;
if (value === "All") updateChildren(childrenAll);
else if (value === "Big") updateChildren(childrenBig);
else updateChildren(childrenSmall);
});
childDropdown.addEventListener("_change", () => {
console.log("Item selected");
});<div style="padding: 40px">
<goa-form-item
version="2"
label="Size"
requirement="optional"
helptext="Choose the size to change the list below"
>
<goa-dropdown
version="2"
id="parent-dropdown"
placeholder="Select a value"
name="parent"
>
<goa-dropdown-item value="All" label="All"></goa-dropdown-item>
<goa-dropdown-item value="Big" label="Big"></goa-dropdown-item>
<goa-dropdown-item value="Small" label="Small"></goa-dropdown-item>
</goa-dropdown>
</goa-form-item>
<goa-form-item version="2" label="Items" requirement="optional" mt="xl">
<goa-dropdown
version="2"
id="child-dropdown"
placeholder="Select a value"
name="children"
>
</goa-dropdown>
</goa-form-item>
</div>Dynamically add an item to a dropdown list
type Task = {
value: string;
label: string;
mount: GoabDropdownItemMountType;
};
const DEFAULT_TASKS: Task[] = [
{ label: "Finish Report", value: "finish-report", mount: "append" },
{ label: "Attend Meeting", value: "attend-meeting", mount: "append" },
{ label: "Reply Emails", value: "reply-emails", mount: "append" },
];
const [tasks, setTasks] = useState<Task[]>(DEFAULT_TASKS);
const [newTask, setNewTask] = useState<string>("");
const [mountType, setMountType] = useState<string>("append");
const [selectedTask, setSelectedTask] = useState<string>("");
const [taskError, setTaskError] = useState<boolean>(false);
const [isReset, setIsReset] = useState<boolean>(false);
function onMountTypeChange(value: string | undefined) {
setMountType(value as string);
}
function addTask() {
if (newTask === "") {
setTaskError(true);
return;
}
setTaskError(false);
const task: Task = {
label: newTask,
value: newTask.toLowerCase().replace(" ", "-"),
mount: mountType as GoabDropdownItemMountType,
};
setTasks([...tasks, task]);
setNewTask("");
setIsReset(false);
}
function reset() {
setTasks(DEFAULT_TASKS);
setMountType("append");
setNewTask("");
setSelectedTask("");
setTaskError(false);
setIsReset(true);
}<GoabFormItem
requirement="required"
label="Name of item"
error={taskError ? "Please enter item name" : undefined}
helpText="Add an item to the dropdown list below"
>
<GoabInput
onChange={(event: GoabInputOnChangeDetail) => setNewTask(event.value)}
name="item"
value={newTask}
/>
</GoabFormItem>
<GoabFormItem mt="l" label="Add to">
<GoabRadioGroup
name="mountType"
onChange={(event: GoabRadioGroupOnChangeDetail) =>
onMountTypeChange(event.value)
}
value={mountType}
orientation="horizontal"
>
<GoabRadioItem value="prepend" label="Start" />
<GoabRadioItem value="append" label="End" />
</GoabRadioGroup>
</GoabFormItem>
<GoabButtonGroup alignment="start" gap="relaxed" mt="l">
<GoabButton type="primary" onClick={addTask}>
Add new item
</GoabButton>
<GoabButton type="tertiary" onClick={reset}>
Reset list
</GoabButton>
</GoabButtonGroup>
<GoabDivider mt="l" />
<GoabFormItem mt="l" label="All items">
<div style={{ width: isReset ? "320px" : "auto" }}>
<GoabDropdown
key={tasks.length}
onChange={(event: GoabDropdownOnChangeDetail) =>
setSelectedTask(event.value as string)
}
value={selectedTask}
name="selectedTask"
>
{tasks.map((task) => (
<GoabDropdownItem
key={task.value}
value={task.value}
mountType={task.mount}
label={task.label}
/>
))}
</GoabDropdown>
</div>
</GoabFormItem>defaultTasks: Task[] = [
{ label: "Finish Report", value: "finish-report", mount: "append" },
{ label: "Attend Meeting", value: "attend-meeting", mount: "append" },
{ label: "Reply Emails", value: "reply-emails", mount: "append" },
];
tasks: Task[] = [...this.defaultTasks];
newTask = "";
mountType: GoabDropdownItemMountType = "append";
selectedTask = "";
taskError = false;
renderTrigger = true;
onMountTypeChange(event: GoabRadioGroupOnChangeDetail): void {
this.mountType = event.value as GoabDropdownItemMountType;
}
onNewTaskChange(event: GoabInputOnChangeDetail): void {
this.newTask = event.value;
this.taskError = false;
}
onSelectedTaskChange(event: GoabDropdownOnChangeDetail): void {
this.selectedTask = event.value as string;
}
addTask(): void {
if (this.newTask === "") {
this.taskError = true;
return;
}
this.taskError = false;
const task: Task = {
label: this.newTask,
value: this.newTask.toLowerCase().replace(" ", "-"),
mount: this.mountType,
};
this.tasks =
this.mountType === "prepend" ? [task, ...this.tasks] : [...this.tasks, task];
this.newTask = "";
}
reset(): void {
this.newTask = "";
this.selectedTask = "";
this.taskError = false;
this.tasks = [...this.defaultTasks];
this.forceRerender();
}
forceRerender(): void {
this.renderTrigger = false;
setTimeout(() => {
this.renderTrigger = true;
}, 0);
}
trackByFn(index: number, item: Task): string {
return item.value;
}<goab-form-item
requirement="required"
label="Name of item"
[error]="taskError ? 'Please enter item name' : undefined"
helpText="Add an item to the dropdown list below"
>
<goab-input name="item" [value]="newTask" (onChange)="onNewTaskChange($event)">
</goab-input>
</goab-form-item>
<goab-form-item mt="l" label="Add to">
<goab-radio-group
name="mountType"
[value]="mountType"
orientation="horizontal"
(onChange)="onMountTypeChange($event)"
>
<goab-radio-item value="prepend" label="Start"></goab-radio-item>
<goab-radio-item value="append" label="End"></goab-radio-item>
</goab-radio-group>
</goab-form-item>
<goab-button-group alignment="start" gap="relaxed" mt="l">
<goab-button type="primary" (onClick)="addTask()"> Add new item </goab-button>
<goab-button type="tertiary" (onClick)="reset()"> Reset list </goab-button>
</goab-button-group>
<goab-divider mt="l"></goab-divider>
<goab-form-item mt="l" label="All items">
<ng-container *ngIf="renderTrigger">
<goab-dropdown
[value]="selectedTask"
name="selectedTask"
(onChange)="onSelectedTaskChange($event)"
>
@for (task of tasks; track task.value) {
<goab-dropdown-item
[value]="task.value"
[mountType]="task.mount"
[label]="task.label"
>
</goab-dropdown-item>
}
</goab-dropdown>
</ng-container>
</goab-form-item>const itemInput = document.getElementById("item-input");
const itemFormItem = document.getElementById("item-form-item");
const mountTypeGroup = document.getElementById("mount-type");
const addBtn = document.getElementById("add-btn");
const resetBtn = document.getElementById("reset-btn");
const dropdown = document.getElementById("task-dropdown");
let mountType = "append";
let newTask = "";
const defaultItems = [
{ value: "finish-report", label: "Finish Report" },
{ value: "attend-meeting", label: "Attend Meeting" },
{ value: "reply-emails", label: "Reply Emails" },
];
mountTypeGroup.addEventListener("_change", (e) => {
mountType = e.detail.value;
});
itemInput.addEventListener("_change", (e) => {
newTask = e.detail.value;
itemFormItem.removeAttribute("error");
});
addBtn.addEventListener("_click", () => {
if (newTask === "") {
itemFormItem.setAttribute("error", "Please enter item name");
return;
}
const newItem = document.createElement("goa-dropdown-item");
newItem.setAttribute("value", newTask.toLowerCase().replace(" ", "-"));
newItem.setAttribute("label", newTask);
newItem.setAttribute("mount", mountType);
dropdown.appendChild(newItem);
itemInput.value = "";
newTask = "";
});
resetBtn.addEventListener("_click", () => {
dropdown.innerHTML = "";
defaultItems.forEach((item) => {
const dropdownItem = document.createElement("goa-dropdown-item");
dropdownItem.setAttribute("value", item.value);
dropdownItem.setAttribute("label", item.label);
dropdown.appendChild(dropdownItem);
});
itemInput.value = "";
newTask = "";
itemFormItem.removeAttribute("error");
});<goa-form-item
version="2"
id="item-form-item"
requirement="required"
label="Name of item"
helptext="Add an item to the dropdown list below"
>
<goa-input version="2" id="item-input" name="item"></goa-input>
</goa-form-item>
<goa-form-item version="2" mt="l" label="Add to">
<goa-radio-group
version="2"
id="mount-type"
name="mountType"
value="append"
orientation="horizontal"
>
<goa-radio-item value="prepend" label="Start"></goa-radio-item>
<goa-radio-item value="append" label="End"></goa-radio-item>
</goa-radio-group>
</goa-form-item>
<goa-button-group alignment="start" gap="relaxed" mt="l">
<goa-button version="2" id="add-btn" type="primary">Add new item</goa-button>
<goa-button version="2" id="reset-btn" type="tertiary">Reset list</goa-button>
</goa-button-group>
<goa-divider mt="l"></goa-divider>
<goa-form-item version="2" mt="l" label="All items">
<goa-dropdown version="2" id="task-dropdown" name="selectedTask">
<goa-dropdown-item value="finish-report" label="Finish Report"></goa-dropdown-item>
<goa-dropdown-item value="attend-meeting" label="Attend Meeting"></goa-dropdown-item>
<goa-dropdown-item value="reply-emails" label="Reply Emails"></goa-dropdown-item>
</goa-dropdown>
</goa-form-item>Filter a list using a push drawer
const [open, setOpen] = useState(false);<div style={{ display: "flex", minHeight: "480px" }}>
<div style={{ flex: 1, minWidth: 0 }}>
<div
style={{
display: "flex",
alignItems: "center",
gap: "1rem",
marginBottom: "1rem",
}}
>
<h3 style={{ flex: 1, margin: 0 }}>All cases</h3>
{!open && (
<GoabButton
type="secondary"
size="compact"
leadingIcon="filter"
onClick={() => setOpen(true)}
>
Filters
</GoabButton>
)}
</div>
<GoabTable width="100%">
<table width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>File number</th>
<th>Act</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<GoabBadge type="success" content="Completed" />
</td>
<td>Gilbert Barton</td>
<td>24567-9876</td>
<td>Traffic safety act</td>
</tr>
<tr>
<td>
<GoabBadge type="information" content="New" />
</td>
<td>Brynn Hurley</td>
<td>98765-3456</td>
<td>Trespass to premises act</td>
</tr>
<tr>
<td>
<GoabBadge type="default" content="In review" />
</td>
<td>Marco Silva</td>
<td>34521-7890</td>
<td>Gaming, liquor, and cannabis act</td>
</tr>
<tr>
<td>
<GoabBadge type="success" content="Completed" />
</td>
<td>Dana Chen</td>
<td>55123-4567</td>
<td>Traffic safety act</td>
</tr>
<tr>
<td>
<GoabBadge type="information" content="New" />
</td>
<td>Amira Hassan</td>
<td>67890-1234</td>
<td>Trespass to premises act</td>
</tr>
</tbody>
</table>
</GoabTable>
</div>
<GoabPushDrawer
heading="Filters"
width="260px"
open={open}
onClose={() => setOpen(false)}
>
<GoabFormItem label="Act">
<GoabCheckboxList name="act" onChange={() => {}}>
<GoabCheckbox name="traffic" text="Traffic safety act" size="compact" />
<GoabCheckbox
name="gaming"
text="Gaming, liquor, and cannabis act"
size="compact"
/>
<GoabCheckbox
name="trespass"
text="Trespass to premises act"
size="compact"
/>
</GoabCheckboxList>
</GoabFormItem>
<GoabFormItem label="Status" mt="l">
<GoabDropdown name="status" onChange={() => {}} value="" size="compact">
<GoabDropdownItem value="" label="All statuses" />
<GoabDropdownItem value="new" label="New" />
<GoabDropdownItem value="in-review" label="In review" />
<GoabDropdownItem value="completed" label="Completed" />
</GoabDropdown>
</GoabFormItem>
</GoabPushDrawer>
</div>open = false;
openFilters(): void {
this.open = true;
}
closeFilters(): void {
this.open = false;
}
onCheckboxChange(event: GoabCheckboxOnChangeDetail): void {
console.log(event);
}
onDropdownChange(event: GoabDropdownOnChangeDetail): void {
console.log(event);
}<div style="display: flex; min-height: 480px">
<div style="flex: 1; min-width: 0">
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem">
<h3 style="flex: 1; margin: 0">All cases</h3>
@if (!open) {
<goab-button
type="secondary"
size="compact"
leadingIcon="filter"
(onClick)="openFilters()"
>Filters</goab-button
>
}
</div>
<goab-table width="100%">
<table width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>File number</th>
<th>Act</th>
</tr>
</thead>
<tbody>
<tr>
<td><goab-badge type="success" content="Completed"></goab-badge></td>
<td>Gilbert Barton</td>
<td>24567-9876</td>
<td>Traffic safety act</td>
</tr>
<tr>
<td><goab-badge type="information" content="New"></goab-badge></td>
<td>Brynn Hurley</td>
<td>98765-3456</td>
<td>Trespass to premises act</td>
</tr>
<tr>
<td><goab-badge type="default" content="In review"></goab-badge></td>
<td>Marco Silva</td>
<td>34521-7890</td>
<td>Gaming, liquor, and cannabis act</td>
</tr>
<tr>
<td><goab-badge type="success" content="Completed"></goab-badge></td>
<td>Dana Chen</td>
<td>55123-4567</td>
<td>Traffic safety act</td>
</tr>
<tr>
<td><goab-badge type="information" content="New"></goab-badge></td>
<td>Amira Hassan</td>
<td>67890-1234</td>
<td>Trespass to premises act</td>
</tr>
</tbody>
</table>
</goab-table>
</div>
<goab-push-drawer
heading="Filters"
width="260px"
[open]="open"
(onClose)="closeFilters()"
>
<goab-form-item label="Act">
<goab-checkbox-list name="act" (onChange)="onCheckboxChange($event)">
<goab-checkbox
name="traffic"
text="Traffic safety act"
size="compact"
></goab-checkbox>
<goab-checkbox
name="gaming"
text="Gaming, liquor, and cannabis act"
size="compact"
></goab-checkbox>
<goab-checkbox
name="trespass"
text="Trespass to premises act"
size="compact"
></goab-checkbox>
</goab-checkbox-list>
</goab-form-item>
<goab-form-item label="Status" mt="l">
<goab-dropdown
name="status"
(onChange)="onDropdownChange($event)"
value=""
size="compact"
>
<goab-dropdown-item value="" label="All statuses"></goab-dropdown-item>
<goab-dropdown-item value="new" label="New"></goab-dropdown-item>
<goab-dropdown-item value="in-review" label="In review"></goab-dropdown-item>
<goab-dropdown-item value="completed" label="Completed"></goab-dropdown-item>
</goab-dropdown>
</goab-form-item>
</goab-push-drawer>
</div>const filtersDrawer = document.getElementById("filters-drawer");
const openFiltersBtn = document.getElementById("open-filters-btn");
openFiltersBtn.addEventListener("_click", () => {
filtersDrawer.setAttribute("open", "true");
openFiltersBtn.style.display = "none";
});
filtersDrawer.addEventListener("_close", () => {
filtersDrawer.removeAttribute("open");
openFiltersBtn.style.display = "";
});<div style="display: flex; min-height: 480px">
<div style="flex: 1; min-width: 0">
<div style="display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem">
<h3 style="flex: 1; margin: 0">All cases</h3>
<goa-button
version="2"
id="open-filters-btn"
type="secondary"
size="compact"
leadingicon="filter"
>Filters</goa-button
>
</div>
<goa-table version="2" width="100%">
<table width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th>File number</th>
<th>Act</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<goa-badge version="2" type="success" content="Completed"></goa-badge>
</td>
<td>Gilbert Barton</td>
<td>24567-9876</td>
<td>Traffic safety act</td>
</tr>
<tr>
<td><goa-badge version="2" type="information" content="New"></goa-badge></td>
<td>Brynn Hurley</td>
<td>98765-3456</td>
<td>Trespass to premises act</td>
</tr>
<tr>
<td>
<goa-badge version="2" type="default" content="In review"></goa-badge>
</td>
<td>Marco Silva</td>
<td>34521-7890</td>
<td>Gaming, liquor, and cannabis act</td>
</tr>
<tr>
<td>
<goa-badge version="2" type="success" content="Completed"></goa-badge>
</td>
<td>Dana Chen</td>
<td>55123-4567</td>
<td>Traffic safety act</td>
</tr>
<tr>
<td><goa-badge version="2" type="information" content="New"></goa-badge></td>
<td>Amira Hassan</td>
<td>67890-1234</td>
<td>Trespass to premises act</td>
</tr>
</tbody>
</table>
</goa-table>
</div>
<goa-push-drawer version="2" id="filters-drawer" heading="Filters" width="260px">
<goa-form-item version="2" label="Act">
<goa-checkbox-list name="act">
<goa-checkbox
version="2"
name="traffic"
text="Traffic safety act"
size="compact"
></goa-checkbox>
<goa-checkbox
version="2"
name="gaming"
text="Gaming, liquor, and cannabis act"
size="compact"
></goa-checkbox>
<goa-checkbox
version="2"
name="trespass"
text="Trespass to premises act"
size="compact"
></goa-checkbox>
</goa-checkbox-list>
</goa-form-item>
<goa-form-item version="2" label="Status" mt="l">
<goa-dropdown version="2" name="status" size="compact">
<goa-dropdown-item value="" label="All statuses"></goa-dropdown-item>
<goa-dropdown-item value="new" label="New"></goa-dropdown-item>
<goa-dropdown-item value="in-review" label="In review"></goa-dropdown-item>
<goa-dropdown-item value="completed" label="Completed"></goa-dropdown-item>
</goa-dropdown>
</goa-form-item>
</goa-push-drawer>
</div>Filter data in a table
const [typedChips, setTypedChips] = useState<string[]>([]);
const [inputValue, setInputValue] = useState("");
const [inputError, setInputError] = useState("");
const errorEmpty = "Empty filter";
const errorDuplicate = "Enter a unique filter";
const data = useMemo(
() => [
{
status: { type: "information" as GoabBadgeType, text: "In progress" },
name: "Ivan Schmidt",
id: "7838576954",
},
{
status: { type: "success" as GoabBadgeType, text: "Completed" },
name: "Luz Lakin",
id: "8576953364",
},
{
status: { type: "information" as GoabBadgeType, text: "In progress" },
name: "Keith McGlynn",
id: "9846041345",
},
{
status: { type: "success" as GoabBadgeType, text: "Completed" },
name: "Melody Frami",
id: "7385256175",
},
{
status: { type: "important" as GoabBadgeType, text: "Updated" },
name: "Frederick Skiles",
id: "5807570418",
},
{
status: { type: "success" as GoabBadgeType, text: "Completed" },
name: "Dana Pfannerstill",
id: "5736306857",
},
],
[],
);
const [dataFiltered, setDataFiltered] = useState(data);
const handleInputChange = (detail: GoabInputOnChangeDetail) => {
const newValue = detail.value.trim();
setInputValue(newValue);
};
const handleInputKeyPress = (detail: GoabInputOnKeyPressDetail) => {
if (detail.key === "Enter") {
applyFilter();
}
};
const applyFilter = () => {
if (inputValue === "") {
setInputError(errorEmpty);
return;
}
if (typedChips.length > 0 && typedChips.includes(inputValue)) {
setInputError(errorDuplicate);
return;
}
setTypedChips([...typedChips, inputValue]);
setTimeout(() => {
setInputValue("");
}, 0);
setInputError("");
};
const removeTypedChip = (chip: string) => {
setTypedChips(typedChips.filter((c) => c !== chip));
setInputError("");
};
const checkNested = useCallback((obj: object, chip: string): boolean => {
return Object.values(obj).some((value) =>
typeof value === "object" && value !== null
? checkNested(value, chip)
: typeof value === "string" && value.toLowerCase().includes(chip.toLowerCase()),
);
}, []);
const getFilteredData = useCallback(
(typedChips: string[]) => {
if (typedChips.length === 0) {
return data;
}
return data.filter((item: object) =>
typedChips.every((chip) => checkNested(item, chip)),
);
},
[checkNested, data],
);
useEffect(() => {
setDataFiltered(getFilteredData(typedChips));
}, [getFilteredData, typedChips]);<GoabFormItem id="filterChipInput" error={inputError} mb="m">
<GoabBlock gap="xs" direction="row" alignment="start" width="100%">
<div style={{ flex: 1 }}>
<GoabInput
name="filterChipInput"
aria-labelledby="filterChipInput"
value={inputValue}
leadingIcon="search"
width="100%"
onChange={handleInputChange}
onKeyPress={handleInputKeyPress}
/>
</div>
<GoabButton type="secondary" onClick={applyFilter} leadingIcon="filter">
Filter
</GoabButton>
</GoabBlock>
</GoabFormItem>
{typedChips.length > 0 && (
<div>
<GoabText tag="span" color="secondary" mb="xs" mr="xs">
Filter:
</GoabText>
{typedChips.map((typedChip, index) => (
<GoabFilterChip
key={index}
content={typedChip}
mb="xs"
mr="xs"
onClick={() => removeTypedChip(typedChip)}
/>
))}
<GoabButton
type="tertiary"
size="compact"
mb="xs"
onClick={() => setTypedChips([])}
>
Clear all
</GoabButton>
</div>
)}
<GoabTable width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th className="goa-table-number-header">ID Number</th>
</tr>
</thead>
<tbody>
{dataFiltered.map((item) => (
<tr key={item.id}>
<td>
<GoabBadge
type={item.status.type}
content={item.status.text}
icon={false}
/>
</td>
<td>{item.name}</td>
<td className="goa-table-number-column">{item.id}</td>
</tr>
))}
</tbody>
</GoabTable>
{dataFiltered.length === 0 && data.length > 0 && (
<GoabBlock mt="l" mb="l">
No results found
</GoabBlock>
)}typedChips: string[] = [];
inputValue = "";
inputError = "";
readonly errorEmpty = "Empty filter";
readonly errorDuplicate = "Enter a unique filter";
readonly data: DataItem[] = [
{
status: { type: "information", text: "In progress" },
name: "Ivan Schmidt",
id: "7838576954",
},
{
status: { type: "success", text: "Completed" },
name: "Luz Lakin",
id: "8576953364",
},
{
status: { type: "information", text: "In progress" },
name: "Keith McGlynn",
id: "9846041345",
},
{
status: { type: "success", text: "Completed" },
name: "Melody Frami",
id: "7385256175",
},
{
status: { type: "important", text: "Updated" },
name: "Frederick Skiles",
id: "5807570418",
},
{
status: { type: "success", text: "Completed" },
name: "Dana Pfannerstill",
id: "5736306857",
},
];
dataFiltered = this.getFilteredData(this.typedChips);
handleInputChange(detail: GoabInputOnChangeDetail): void {
const newValue = detail.value.trim();
this.inputValue = newValue;
}
handleInputKeyPress(detail: GoabInputOnKeyPressDetail): void {
if (detail.key === "Enter") {
this.applyFilter();
}
}
applyFilter(): void {
if (this.inputValue === "") {
this.inputError = this.errorEmpty;
return;
}
if (this.typedChips.includes(this.inputValue)) {
this.inputError = this.errorDuplicate;
return;
}
this.typedChips = [...this.typedChips, this.inputValue];
this.inputValue = "";
this.inputError = "";
this.dataFiltered = this.getFilteredData(this.typedChips);
}
removeTypedChip(chip: string): void {
this.typedChips = this.typedChips.filter((c) => c !== chip);
this.dataFiltered = this.getFilteredData(this.typedChips);
this.inputError = "";
}
removeAllTypedChips(): void {
this.typedChips = [];
this.dataFiltered = this.getFilteredData(this.typedChips);
this.inputError = "";
}
getFilteredData(typedChips: string[]): DataItem[] {
if (typedChips.length === 0) {
return this.data;
}
return this.data.filter((item) =>
typedChips.every((chip) => this.checkNested(item, chip)),
);
}
checkNested(obj: object, chip: string): boolean {
return Object.values(obj).some((value) =>
typeof value === "object" && value !== null
? this.checkNested(value, chip)
: typeof value === "string" && value.toLowerCase().includes(chip.toLowerCase()),
);
}<goab-form-item id="filterChipInput" [error]="inputError" mb="m">
<goab-block gap="xs" direction="row" alignment="start" width="100%">
<div style="flex: 1">
<goab-input
name="filterChipInput"
aria-labelledby="filterChipInput"
[value]="inputValue"
leadingIcon="search"
width="100%"
(onChange)="handleInputChange($event)"
(onKeyPress)="handleInputKeyPress($event)"
>
</goab-input>
</div>
<goab-button type="secondary" (onClick)="applyFilter()" leadingIcon="filter">
Filter
</goab-button>
</goab-block>
</goab-form-item>
@if (typedChips.length > 0) {
<ng-container>
<goab-text tag="span" color="secondary" mb="xs" mr="xs"> Filter: </goab-text>
@for (typedChip of typedChips; track typedChip; let index = $index) {
<goab-filter-chip
[content]="typedChip"
mb="xs"
mr="xs"
(onClick)="removeTypedChip(typedChip)"
>
</goab-filter-chip>
}
<goab-button type="tertiary" size="compact" mb="xs" (onClick)="removeAllTypedChips()">
Clear all
</goab-button>
</ng-container>
}
<goab-table width="100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th class="goa-table-number-header">ID Number</th>
</tr>
</thead>
<tbody>
@for (item of dataFiltered; track $index) {
<tr>
<td>
<goab-badge
[type]="item.status.type"
[content]="item.status.text"
[icon]="false"
></goab-badge>
</td>
<td>{{ item.name }}</td>
<td class="goa-table-number-column">{{ item.id }}</td>
</tr>
}
</tbody>
</goab-table>
@if (dataFiltered.length === 0 && data.length > 0) {
<goab-block mt="l" mb="l"> No results found </goab-block>
}const filterInput = document.getElementById("filter-input");
const filterBtn = document.getElementById("filter-btn");
const filterFormItem = document.getElementById("filter-form-item");
const chipsContainer = document.getElementById("chips-container");
const chipsList = document.getElementById("chips-list");
const clearAllBtn = document.getElementById("clear-all-btn");
const tableRows = document.querySelectorAll("tbody tr");
let typedChips = [];
function filterTable() {
tableRows.forEach((row) => {
const badge = row.querySelector("goa-badge");
const badgeText = badge ? badge.getAttribute("content") || "" : "";
const text = (row.textContent + " " + badgeText).toLowerCase();
const matches =
typedChips.length === 0 ||
typedChips.every((chip) => text.includes(chip.toLowerCase()));
row.style.display = matches ? "" : "none";
});
}
function renderChips() {
chipsList.innerHTML = "";
typedChips.forEach((chip) => {
const filterChip = document.createElement("goa-filter-chip");
filterChip.setAttribute("version", "2");
filterChip.setAttribute("content", chip);
filterChip.setAttribute("mb", "xs");
filterChip.setAttribute("mr", "xs");
filterChip.addEventListener("_click", () => removeChip(chip));
chipsList.appendChild(filterChip);
});
chipsContainer.style.display = typedChips.length > 0 ? "block" : "none";
filterTable();
}
function applyFilter() {
const value = filterInput.value.trim();
if (value === "") {
filterFormItem.setAttribute("error", "Empty filter");
return;
}
if (typedChips.includes(value)) {
filterFormItem.setAttribute("error", "Enter a unique filter");
return;
}
typedChips.push(value);
filterInput.value = "";
filterFormItem.removeAttribute("error");
renderChips();
}
function removeChip(chip) {
typedChips = typedChips.filter((c) => c !== chip);
renderChips();
}
filterBtn.addEventListener("_click", applyFilter);
clearAllBtn.addEventListener("_click", () => {
typedChips = [];
renderChips();
});<goa-form-item version="2" id="filter-form-item" mb="m">
<goa-block gap="xs" direction="row" alignment="center" width="100%">
<div style="flex: 1">
<goa-input
version="2"
id="filter-input"
name="filterChipInput"
leadingicon="search"
width="100%"
>
</goa-input>
</div>
<goa-button version="2" id="filter-btn" type="secondary" leadingicon="filter">
Filter
</goa-button>
</goa-block>
</goa-form-item>
<div id="chips-container" style="display: none">
<goa-text as="span" color="secondary" mb="xs" mr="xs">Filter:</goa-text>
<span id="chips-list"></span>
<goa-button version="2" id="clear-all-btn" type="tertiary" size="compact" mb="xs">
Clear all
</goa-button>
</div>
<goa-table version="2" width="100%" mt="s">
<table style="width: 100%">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th class="goa-table-number-header">ID Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<goa-badge
version="2"
type="information"
content="In progress"
icon="false"
></goa-badge>
</td>
<td>Ivan Schmidt</td>
<td class="goa-table-number-column">7838576954</td>
</tr>
<tr>
<td>
<goa-badge
version="2"
type="success"
content="Completed"
icon="false"
></goa-badge>
</td>
<td>Luz Lakin</td>
<td class="goa-table-number-column">8576953364</td>
</tr>
<tr>
<td>
<goa-badge
version="2"
type="information"
content="In progress"
icon="false"
></goa-badge>
</td>
<td>Keith McGlynn</td>
<td class="goa-table-number-column">9846041345</td>
</tr>
<tr>
<td>
<goa-badge
version="2"
type="success"
content="Completed"
icon="false"
></goa-badge>
</td>
<td>Melody Frami</td>
<td class="goa-table-number-column">7385256175</td>
</tr>
<tr>
<td>
<goa-badge
version="2"
type="important"
content="Updated"
icon="false"
></goa-badge>
</td>
<td>Frederick Skiles</td>
<td class="goa-table-number-column">5807570418</td>
</tr>
<tr>
<td>
<goa-badge
version="2"
type="success"
content="Completed"
icon="false"
></goa-badge>
</td>
<td>Dana Pfannerstill</td>
<td class="goa-table-number-column">5736306857</td>
</tr>
</tbody>
</table>
</goa-table>Include a link in the helper text of an option
<GoabFormItem label="How would you like to be contacted?">
<GoabCheckboxList name="contact-options">
<GoabCheckbox
name="email"
text="Email"
value="email"
description={
<span>
Help text with a <a href="#">link</a>.
</span>
}
/>
<GoabCheckbox name="phone" text="Phone" value="phone" />
<GoabCheckbox name="text" text="Text message" value="text" />
</GoabCheckboxList>
</GoabFormItem>optionOne = true;
optionTwo = false;
optionThree = false;<goab-form-item label="How would you like to be contacted?">
<goab-checkbox-list name="contact-options">
<goab-checkbox
name="email"
text="Email"
value="email"
[description]="descriptionTemplate"
>
<ng-template #descriptionTemplate>
<span>Help text with a <a href="#">link</a>.</span>
</ng-template>
</goab-checkbox>
<goab-checkbox name="phone" text="Phone" value="phone"></goab-checkbox>
<goab-checkbox name="text" text="Text message" value="text"></goab-checkbox>
</goab-checkbox-list>
</goab-form-item><goa-form-item version="2" label="How would you like to be contacted?">
<goa-checkbox-list name="contact-options">
<goa-checkbox version="2" name="email" text="Email" value="email">
<span slot="description">Help text with a <a href="#">link</a>.</span>
</goa-checkbox>
<goa-checkbox version="2" name="phone" text="Phone" value="phone"></goa-checkbox>
<goa-checkbox version="2" name="text" text="Text message" value="text"></goa-checkbox>
</goa-checkbox-list>
</goa-form-item>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>Reset date picker field
const [date, setDate] = useState<Date | undefined>();
const setNewDate = (value: Date | undefined) => {
setDate(value);
};
function setValue() {
const d = new Date();
d.setDate(d.getDate() - 7);
setDate(d);
}
function clearValue() {
setDate(undefined);
}<GoabFormItem label="Date Picker">
<GoabDatePicker
name="item"
value={date}
onChange={(e) => setNewDate(e.value as Date)}
mb="xl"
/>
</GoabFormItem>
<GoabButtonGroup mt="xs" alignment="start">
<GoabButton onClick={setValue}>Set Value</GoabButton>
<GoabButton onClick={clearValue}>Clear Value</GoabButton>
</GoabButtonGroup>item: Date | undefined = undefined;
onChange(event: GoabDatePickerOnChangeDetail): void {
this.item = event.valueStr ? new Date(event.valueStr) : undefined;
}
setValue(): void {
const d = new Date();
d.setDate(d.getDate() - 7);
this.item = d;
}
clearValue(): void {
this.item = undefined;
}<goab-form-item label="Date Picker">
<goab-date-picker (onChange)="onChange($event)" name="item" [value]="item">
</goab-date-picker>
</goab-form-item>
<goab-button-group alignment="start" mt="xs">
<goab-button (onClick)="setValue()">Set Value</goab-button>
<goab-button (onClick)="clearValue()">Clear Value</goab-button>
</goab-button-group>const datePicker = document.getElementById("date-picker");
const setValueBtn = document.getElementById("set-value-btn");
const clearValueBtn = document.getElementById("clear-value-btn");
datePicker.addEventListener("_change", (e) => {
console.log("Date changed:", e.detail.value);
});
setValueBtn.addEventListener("_click", () => {
const d = new Date();
d.setDate(d.getDate() - 7);
datePicker.setAttribute("value", d.toISOString());
});
clearValueBtn.addEventListener("_click", () => {
datePicker.removeAttribute("value");
});<goa-form-item version="2" label="Date Picker">
<goa-date-picker version="2" id="date-picker" name="item"></goa-date-picker>
</goa-form-item>
<goa-button-group alignment="start" mt="xs">
<goa-button version="2" id="set-value-btn">Set Value</goa-button>
<goa-button version="2" id="clear-value-btn">Clear Value</goa-button>
</goa-button-group>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)"} & 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) & 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) & 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>const [search, setSearch] = useState("");
const onClick = () => {
console.log("search:", search);
};<form>
<GoabFormItem>
<GoabBlock gap="xs" direction="row">
<GoabInput
type="search"
name="search"
value={search}
onChange={(e) => setSearch(e.value)}
leadingIcon="search"
/>
<GoabButton type="primary" onClick={onClick}>
Search
</GoabButton>
</GoabBlock>
</GoabFormItem>
</form>form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
search: [""],
});
}
onClick(): void {
console.log("search:", this.form.controls["search"].value);
}<form [formGroup]="form">
<goab-form-item>
<goab-block gap="xs" direction="row">
<goab-input
type="search"
name="search"
formControlName="search"
leadingIcon="search"
>
</goab-input>
<goab-button type="primary" (onClick)="onClick()">Search</goab-button>
</goab-block>
</goab-form-item>
</form>const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-btn");
let searchValue = "";
searchInput.addEventListener("_change", (e) => {
searchValue = e.detail.value;
});
searchBtn.addEventListener("_click", () => {
console.log("search:", searchValue);
});<form>
<goa-form-item version="2">
<goa-block gap="xs" direction="row">
<goa-input
version="2"
id="search-input"
type="search"
name="search"
leadingicon="search"
>
</goa-input>
<goa-button version="2" id="search-btn" type="primary">Search</goa-button>
</goa-block>
</goa-form-item>
</form>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>Select one or more from a list of options
const [selectedOptions, setSelectedOptions] = useState<string[]>([]);<GoabFormItem
label="How would you like to be contacted?"
helpText="Choose all that apply"
>
<GoabCheckboxList
name="contactPreferences"
value={selectedOptions}
onChange={(e) => setSelectedOptions(e.value)}
>
<GoabCheckbox name="email" text="Email" value="email" />
<GoabCheckbox name="phone" text="Phone" value="phone" />
<GoabCheckbox name="text" text="Text message" value="text" />
</GoabCheckboxList>
</GoabFormItem>selectedOptions: string[] = [];
onSelectionChange(event: GoabCheckboxListOnChangeDetail): void {
this.selectedOptions = event.value;
}<goab-form-item
label="How would you like to be contacted?"
helpText="Choose all that apply"
>
<goab-checkbox-list
name="contactPreferences"
[value]="selectedOptions"
(onChange)="onSelectionChange($event)"
>
<goab-checkbox name="email" text="Email" value="email"></goab-checkbox>
<goab-checkbox name="phone" text="Phone" value="phone"></goab-checkbox>
<goab-checkbox name="text" text="Text message" value="text"></goab-checkbox>
</goab-checkbox-list>
</goab-form-item>const checkboxList = document.querySelector("goa-checkbox-list");
let selectedOptions = [];
checkboxList.addEventListener("_change", (e) => {
selectedOptions = e.detail.value;
console.log("Selected options:", selectedOptions);
});<goa-form-item
version="2"
label="How would you like to be contacted?"
helptext="Choose all that apply"
>
<goa-checkbox-list name="contactPreferences">
<goa-checkbox version="2" name="email" text="Email" value="email"></goa-checkbox>
<goa-checkbox version="2" name="phone" text="Phone" value="phone"></goa-checkbox>
<goa-checkbox version="2" name="text" text="Text message" value="text"></goa-checkbox>
</goa-checkbox-list>
</goa-form-item>Slotted error text in a form item
const [value, setValue] = useState("");
const onChange = (detail: GoabInputOnChangeDetail) => {
setValue(detail.value);
};
const errorMessage = (
<>
<i>This is </i> slotted <b>error text</b>.
</>
);<GoabFormItem label="First name" error={errorMessage}>
<GoabInput onChange={onChange} value={value} name="item" error={true} />
</GoabFormItem>form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
item: [""],
});
}<goab-form-item label="First name" [formGroup]="form" [error]="errorTemplate">
<goab-input name="item" formControlName="item" [error]="true"></goab-input>
<ng-template #errorTemplate>
<span>This is </span>
<i>slotted </i>
<b>error text.</b>
</ng-template>
</goab-form-item>const input = document.querySelector('goa-input[name="item"]');
input.addEventListener("_change", (e) => {
console.log("Value changed:", e.detail.value);
});<goa-form-item version="2" label="First name">
<goa-input version="2" name="item" error="true"></goa-input>
<div slot="error">
<span>This is </span>
<i>slotted </i>
<b>error text.</b>
</div>
</goa-form-item>Slotted helper text in a form item
const [value, setValue] = useState("");
const onChange = (detail: GoabInputOnChangeDetail) => {
setValue(detail.value);
};
const helpText = (
<>
<i>This is </i> slotted <b>help text</b>.
</>
);<GoabFormItem label="First name" helpText={helpText}>
<GoabInput onChange={onChange} value={value} name="item" />
</GoabFormItem>form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
item: [""],
});
}<goab-form-item label="First name" [formGroup]="form" [helpText]="helpTextTemplate">
<goab-input name="item" formControlName="item"></goab-input>
<ng-template #helpTextTemplate>
<span>This is </span>
<i>slotted </i>
<b>help text</b>.
</ng-template>
</goab-form-item>const input = document.querySelector('goa-input[name="item"]');
input.addEventListener("_change", (e) => {
console.log("Value changed:", e.detail.value);
});<goa-form-item version="2" label="First name">
<goa-input version="2" name="item"></goa-input>
<div slot="helptext">
<span>This is </span>
<i>slotted </i>
<b>help text</b>.
</div>
</goa-form-item>const [typedChips, setTypedChips] = useState<string[]>([]);
const [inputValue, setInputValue] = useState("");
const addChip = () => {
if (inputValue.trim()) {
setTypedChips([...typedChips, inputValue.trim()]);
setInputValue("");
}
};<GoabFormItem label="Type to create a chip" mb="m">
<GoabBlock gap="xs" direction="row">
<div style={{ flex: 1 }}>
<GoabInput
name="chipInput"
value={inputValue}
onChange={(e) => setInputValue(e.value)}
onKeyPress={(e) => {
if (e.key === "Enter" && e.value.trim()) {
setTypedChips([...typedChips, e.value.trim()]);
setTimeout(() => setInputValue(""), 0);
} else if (
e.key === "Backspace" &&
!e.value.trim() &&
typedChips.length > 0
) {
setTypedChips(typedChips.slice(0, -1));
}
}}
width="100%"
/>
</div>
<GoabButton type="secondary" onClick={addChip}>
Add
</GoabButton>
</GoabBlock>
</GoabFormItem>
<div>
{typedChips.map((chip, index) => (
<GoabFilterChip
key={index}
content={chip}
mb="xs"
mr="xs"
onClick={() => setTypedChips(typedChips.filter((c) => c !== chip))}
/>
))}
</div>typedChips: string[] = [];
inputValue = "";
handleInputChange(detail: GoabInputOnChangeDetail): void {
const newValue = detail.value.trim();
this.inputValue = newValue;
}
handleInputKeyPress(detail: GoabInputOnKeyPressDetail): void {
const newValue = detail.value.trim();
if (detail.key === "Enter" && newValue !== "") {
this.addChip();
} else if (
!this.inputValue &&
this.typedChips.length > 0 &&
detail.key === "Backspace"
) {
this.typedChips.pop();
}
}
addChip(): void {
if (this.inputValue.trim()) {
this.typedChips.push(this.inputValue.trim());
this.inputValue = "";
}
}
removeTypedChip(chip: string): void {
this.typedChips = this.typedChips.filter((c) => c !== chip);
}<goab-form-item label="Type to create a chip" mb="m">
<goab-block gap="xs" direction="row">
<div style="flex: 1">
<goab-input
[value]="inputValue"
(onChange)="handleInputChange($event)"
(onKeyPress)="handleInputKeyPress($event)"
width="100%"
>
</goab-input>
</div>
<goab-button type="secondary" (onClick)="addChip()">Add</goab-button>
</goab-block>
</goab-form-item>
@if (typedChips.length > 0) {
<div>
@for (typedChip of typedChips; track typedChip) {
<goab-filter-chip
[content]="typedChip"
mb="xs"
mr="xs"
(onClick)="removeTypedChip(typedChip)"
>
</goab-filter-chip>
}
</div>
}const typedChips = [];
const input = document.getElementById("chip-input");
const addBtn = document.getElementById("add-btn");
const container = document.getElementById("chips-container");
let currentValue = "";
function renderChips() {
container.innerHTML = "";
typedChips.forEach((chip) => {
const chipEl = document.createElement("goa-filter-chip");
chipEl.setAttribute("version", "2");
chipEl.setAttribute("content", chip);
chipEl.setAttribute("mb", "xs");
chipEl.setAttribute("mr", "xs");
chipEl.addEventListener("_click", () => removeChip(chip));
container.appendChild(chipEl);
});
}
function addChip() {
if (currentValue.trim()) {
typedChips.push(currentValue.trim());
currentValue = "";
input.setAttribute("value", "");
renderChips();
}
}
function removeChip(chip) {
const index = typedChips.indexOf(chip);
if (index > -1) {
typedChips.splice(index, 1);
renderChips();
}
}
input.addEventListener("_change", (e) => {
currentValue = e.detail.value || "";
});
addBtn.addEventListener("_click", () => {
addChip();
});<goa-form-item version="2" label="Type to create a chip" mb="m">
<goa-block gap="xs" direction="row">
<div style="flex: 1">
<goa-input version="2" id="chip-input" width="100%"></goa-input>
</div>
<goa-button version="2" id="add-btn" type="secondary">Add</goa-button>
</goa-block>
</goa-form-item>
<div id="chips-container"></div>Other
The form item automatically associates the label with the input for screen readers, ensuring your form is accessible.
Do
Use a form item wrapper on all inputs to add a label, helper text, error message, and more.
Sizing
Tip
Use labelSize='large' when you want the question to act as the heading on the page. This is often the right choice when there's only one question on a page, so you don't end up with a separate heading and a question saying the same thing.
Forms
Don't
Don't use the character counter for input fields where user entries typically have standard or predictable lengths.
Do
Use the character count only when there's a valid reason to limit the number of characters.
Do
Make empty text areas as tall as the content they are expected to contain.
Do
Ensure that the text area width is no longer than 75 characters per line; ideal line length is 45-75 characters.
Don't
Don't use a text area which is only one line high; instead, use text input if just one line is needed.
Do
If you suggest a specific length for an answer to a question, display a word count to help guide the user.
