Form item
Wraps an input control with a text label, requirement label, helper text, and error text.
Props
testId
string
Sets a data-testid attribute for automated testing.
label
string
Creates a label for the form item.
labelSize
compact | regular | large
Sets the label size. 'compact' for dense layouts, 'regular' for standard, 'large' for emphasis.
Defaults to
regular.
helpText
string
Help text displayed under the form field to provide additional explanation.
error
string
Error text displayed under the form field. Leave blank to indicate a valid field.
requirement
optional | required
Marks the field with an optional or required label indicator.
maxWidth
string
Sets the maximum width of the form item.
Defaults to
none.
type
text-input | textarea | checkbox-list | radio-group
Specifies the input type for appropriate message spacing. Used with checkbox-list or radio-group.
name
string
Overrides the label value within the form-summary. For public-form use only.
Defaults to
blank.
mt, mr, mb, ml
none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl
Apply margin to the top, right, bottom, and/or left of the component.
Slots
error
Named slot for content
helptext
Named slot for content
Add a record using a drawer
const [open, setOpen] = useState(false);<GoabxButton leadingIcon="add" onClick={() => setOpen(true)}>
Add Record
</GoabxButton>
<GoabxDrawer
maxSize="492px"
open={open}
heading="Add Record"
position="right"
onClose={() => setOpen(false)}
actions={
<GoabButtonGroup>
<GoabxButton type="primary" size="compact" onClick={() => setOpen(false)}>
Add record
</GoabxButton>
<GoabxButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
Cancel
</GoabxButton>
</GoabButtonGroup>
}
>
<GoabxFormItem label="Level of education">
<GoabxDropdown onChange={() => {}} name="education" value="university">
<GoabxDropdownItem value="high-school" label="High School Diploma" />
<GoabxDropdownItem value="college" label="College Diploma" />
<GoabxDropdownItem value="university" label="University Degree" />
<GoabxDropdownItem value="masters" label="Master's Degree" />
<GoabxDropdownItem value="doctorate" label="Doctorate" />
</GoabxDropdown>
</GoabxFormItem>
<GoabxFormItem label="Educational institution" mt="l">
<GoabxInput name="education" type="text" onChange={() => {}} />
</GoabxFormItem>
<GoabxFormItem label="Field of study" requirement="optional" mt="l">
<GoabxInput name="fieldOfStudy" type="text" onChange={() => {}} />
</GoabxFormItem>
<GoabxFormItem label="Is the person currently attending?" mt="l">
<GoabxRadioGroup name="attendTraining" orientation="horizontal" onChange={() => {}}>
<GoabxRadioItem value="yes" label="Yes" />
<GoabxRadioItem value="no" label="No" />
</GoabxRadioGroup>
</GoabxFormItem>
<GoabxFormItem label="Start date" mt="l">
<GoabxDatePicker onChange={() => {}} value={new Date("2022-09-01")} />
<GoabxCheckbox name="startDateApproximate" text="Approximate date" value="y" mt="s" />
</GoabxFormItem>
<GoabxFormItem label="Credential received?" mt="l">
<GoabxRadioGroup name="credentialReceived" orientation="horizontal" onChange={() => {}}>
<GoabxRadioItem value="yes" label="Yes" />
<GoabxRadioItem value="no" label="No" />
</GoabxRadioGroup>
</GoabxFormItem>
</GoabxDrawer>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;
}<goabx-button leadingIcon="add" (onClick)="onClick()">Add Record</goabx-button>
<goabx-drawer maxSize="492px" [open]="open" heading="Add Record" position="right" (onClose)="onClose()" [actions]="actions">
<goabx-form-item label="Level of education">
<goabx-dropdown (onChange)="dropdownOnChange($event)" name="education" value="university">
<goabx-dropdown-item value="high-school" label="High School Diploma"></goabx-dropdown-item>
<goabx-dropdown-item value="college" label="College Diploma"></goabx-dropdown-item>
<goabx-dropdown-item value="university" label="University Degree"></goabx-dropdown-item>
<goabx-dropdown-item value="masters" label="Master's Degree"></goabx-dropdown-item>
<goabx-dropdown-item value="doctorate" label="Doctorate"></goabx-dropdown-item>
</goabx-dropdown>
</goabx-form-item>
<goabx-form-item label="Educational institution" mt="l">
<goabx-input name="education" type="text" (onChange)="inputOnChange($event)"></goabx-input>
</goabx-form-item>
<goabx-form-item label="Field of study" requirement="optional" mt="l">
<goabx-input name="fieldOfStudy" type="text" (onChange)="inputOnChange($event)"></goabx-input>
</goabx-form-item>
<goabx-form-item label="Is the person currently attending?" mt="l">
<goabx-radio-group name="attendTraining" orientation="horizontal" (onChange)="radioOnChange($event)">
<goabx-radio-item value="yes" label="Yes"></goabx-radio-item>
<goabx-radio-item value="no" label="No"></goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>
<goabx-form-item label="Start date" mt="l">
<goabx-date-picker (onChange)="dateOnChange($event)"></goabx-date-picker>
<goabx-checkbox name="startDateApproximate" text="Approximate date" value="y" mt="s"></goabx-checkbox>
</goabx-form-item>
<goabx-form-item label="Credential received?" mt="l">
<goabx-radio-group name="credentialReceived" orientation="horizontal" (onChange)="radioOnChange($event)">
<goabx-radio-item value="yes" label="Yes"></goabx-radio-item>
<goabx-radio-item value="no" label="No"></goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>
<ng-template #actions>
<goab-button-group>
<goabx-button type="primary" size="compact" (onClick)="closeDrawer()">Add record</goabx-button>
<goabx-button type="tertiary" size="compact" (onClick)="closeDrawer()">Cancel</goabx-button>
</goab-button-group>
</ng-template>
</goabx-drawer>const drawer = document.getElementById("record-drawer");
const openBtn = document.getElementById("open-drawer-btn");
const addBtn = document.getElementById("add-record-btn");
const cancelBtn = document.getElementById("cancel-btn");
openBtn.addEventListener("_click", () => {
drawer.setAttribute("open", "true");
});
drawer.addEventListener("_close", () => {
drawer.removeAttribute("open");
});
addBtn.addEventListener("_click", () => {
drawer.removeAttribute("open");
});
cancelBtn.addEventListener("_click", () => {
drawer.removeAttribute("open");
});<goa-button version="2" id="open-drawer-btn" leadingicon="add">Add Record</goa-button>
<goa-drawer version="2" id="record-drawer" max-size="492px" heading="Add Record" position="right">
<goa-form-item version="2" label="Level of education">
<goa-dropdown version="2" name="education" value="university">
<goa-dropdown-item value="high-school" label="High School Diploma"></goa-dropdown-item>
<goa-dropdown-item value="college" label="College Diploma"></goa-dropdown-item>
<goa-dropdown-item value="university" label="University Degree"></goa-dropdown-item>
<goa-dropdown-item value="masters" label="Master's Degree"></goa-dropdown-item>
<goa-dropdown-item value="doctorate" label="Doctorate"></goa-dropdown-item>
</goa-dropdown>
</goa-form-item>
<goa-form-item version="2" label="Educational institution" mt="l">
<goa-input version="2" name="education" type="text"></goa-input>
</goa-form-item>
<goa-form-item version="2" label="Field of study" requirement="optional" mt="l">
<goa-input version="2" name="fieldOfStudy" type="text"></goa-input>
</goa-form-item>
<goa-form-item version="2" label="Is the person currently attending?" mt="l">
<goa-radio-group version="2" name="attendTraining" orientation="horizontal">
<goa-radio-item value="yes" label="Yes"></goa-radio-item>
<goa-radio-item value="no" label="No"></goa-radio-item>
</goa-radio-group>
</goa-form-item>
<goa-form-item version="2" label="Start date" mt="l">
<goa-date-picker version="2"></goa-date-picker>
<goa-checkbox version="2" name="startDateApproximate" text="Approximate date" value="y" mt="s"></goa-checkbox>
</goa-form-item>
<goa-form-item version="2" label="Credential received?" mt="l">
<goa-radio-group version="2" name="credentialReceived" orientation="horizontal">
<goa-radio-item value="yes" label="Yes"></goa-radio-item>
<goa-radio-item value="no" label="No"></goa-radio-item>
</goa-radio-group>
</goa-form-item>
<div slot="actions">
<goa-button-group>
<goa-button version="2" id="add-record-btn" type="primary" size="compact">Add record</goa-button>
<goa-button version="2" id="cancel-btn" type="tertiary" size="compact">Cancel</goa-button>
</goa-button-group>
</div>
</goa-drawer>Add and edit lots of filters
const [open, setOpen] = useState(false);<GoabxButton onClick={() => setOpen(true)}>Filters</GoabxButton>
<GoabxDrawer
heading="Filters"
open={open}
onClose={() => setOpen(false)}
position="right"
actions={
<GoabButtonGroup>
<GoabxButton type="primary" size="compact" onClick={() => setOpen(false)}>
Apply filters
</GoabxButton>
<GoabxButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
Cancel
</GoabxButton>
</GoabButtonGroup>
}
>
<GoabxFormItem label="Entry status">
<GoabCheckboxList name="entryStatus" onChange={() => {}}>
<GoabxCheckbox name="draft" text="Draft" value="draft" />
<GoabxCheckbox name="published" text="Published" value="published" />
</GoabCheckboxList>
</GoabxFormItem>
<GoabxFormItem label="Assigned to - Region" mt="l">
<GoabCheckboxList name="region" onChange={() => {}}>
<GoabxCheckbox name="calgary" text="Calgary" value="calgary" />
<GoabxCheckbox name="central" text="Central" value="central" />
<GoabxCheckbox name="edmonton" text="Edmonton" value="edmonton" />
<GoabxCheckbox name="north" text="North" value="north" />
<GoabxCheckbox name="south" text="South" value="south" />
</GoabCheckboxList>
</GoabxFormItem>
<GoabxFormItem label="Assigned to" mt="l">
<GoabxDropdown name="assignedTo" onChange={() => {}}>
<GoabxDropdownItem value="1" label="Person 1" />
<GoabxDropdownItem value="2" label="Person 2" />
</GoabxDropdown>
</GoabxFormItem>
<GoabxFormItem label="Date taken" mt="l">
<GoabxRadioGroup name="dateTaken" onChange={() => {}}>
<GoabxRadioItem value="24" label="Last 24 hours" />
<GoabxRadioItem value="72" label="Last 72 hours" />
</GoabxRadioGroup>
</GoabxFormItem>
</GoabxDrawer>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;
}<goabx-button (onClick)="onClick()">Filters</goabx-button>
<goabx-drawer heading="Filters" [open]="open" (onClose)="onClose()" position="right" [actions]="actions">
<goabx-form-item label="Entry status">
<goab-checkbox-list name="entryStatus" (onChange)="onCheckboxChange($event)">
<goabx-checkbox name="draft" text="Draft" value="draft"></goabx-checkbox>
<goabx-checkbox name="published" text="Published" value="published"></goabx-checkbox>
</goab-checkbox-list>
</goabx-form-item>
<goabx-form-item label="Assigned to - Region" mt="l">
<goab-checkbox-list name="region" (onChange)="onCheckboxChange($event)">
<goabx-checkbox name="calgary" text="Calgary" value="calgary"></goabx-checkbox>
<goabx-checkbox name="central" text="Central" value="central"></goabx-checkbox>
<goabx-checkbox name="edmonton" text="Edmonton" value="edmonton"></goabx-checkbox>
<goabx-checkbox name="north" text="North" value="north"></goabx-checkbox>
<goabx-checkbox name="south" text="South" value="south"></goabx-checkbox>
</goab-checkbox-list>
</goabx-form-item>
<goabx-form-item label="Assigned to" mt="l">
<goabx-dropdown [value]="assignedTo" name="assignedToData" (onChange)="onChangeAssignedTo($event)">
<goabx-dropdown-item value="1" label="Person 1"></goabx-dropdown-item>
<goabx-dropdown-item value="2" label="Person 2"></goabx-dropdown-item>
</goabx-dropdown>
</goabx-form-item>
<goabx-form-item label="Date taken" mt="l">
<goabx-radio-group name="dateTaken" (onChange)="radioOnChange($event)">
<goabx-radio-item value="24" label="Last 24 hours"></goabx-radio-item>
<goabx-radio-item value="72" label="Last 72 hours"></goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>
<ng-template #actions>
<goab-button-group>
<goabx-button type="primary" size="compact" (onClick)="closeDrawer()">Apply filters</goabx-button>
<goabx-button type="tertiary" size="compact" (onClick)="closeDrawer()">Cancel</goabx-button>
</goab-button-group>
</ng-template>
</goabx-drawer>const drawer = document.getElementById("filters-drawer");
const openBtn = document.getElementById("open-filters-btn");
const applyBtn = document.getElementById("apply-filters-btn");
const cancelBtn = document.getElementById("cancel-btn");
openBtn.addEventListener("_click", () => {
drawer.setAttribute("open", "true");
});
drawer.addEventListener("_close", () => {
drawer.removeAttribute("open");
});
applyBtn.addEventListener("_click", () => {
drawer.removeAttribute("open");
});
cancelBtn.addEventListener("_click", () => {
drawer.removeAttribute("open");
});<goa-button version="2" id="open-filters-btn">Filters</goa-button>
<goa-drawer version="2" id="filters-drawer" heading="Filters" position="right">
<goa-form-item version="2" label="Entry status">
<goa-checkbox-list name="entryStatus">
<goa-checkbox version="2" name="draft" text="Draft" value="draft"></goa-checkbox>
<goa-checkbox version="2" name="published" text="Published" value="published"></goa-checkbox>
</goa-checkbox-list>
</goa-form-item>
<goa-form-item version="2" label="Assigned to - Region" mt="l">
<goa-checkbox-list name="region">
<goa-checkbox version="2" name="calgary" text="Calgary" value="calgary"></goa-checkbox>
<goa-checkbox version="2" name="central" text="Central" value="central"></goa-checkbox>
<goa-checkbox version="2" name="edmonton" text="Edmonton" value="edmonton"></goa-checkbox>
<goa-checkbox version="2" name="north" text="North" value="north"></goa-checkbox>
<goa-checkbox version="2" name="south" text="South" value="south"></goa-checkbox>
</goa-checkbox-list>
</goa-form-item>
<goa-form-item version="2" label="Assigned to" mt="l">
<goa-dropdown version="2" name="assignedTo">
<goa-dropdown-item value="1" label="Person 1"></goa-dropdown-item>
<goa-dropdown-item value="2" label="Person 2"></goa-dropdown-item>
</goa-dropdown>
</goa-form-item>
<goa-form-item version="2" label="Date taken" mt="l">
<goa-radio-group version="2" name="dateTaken">
<goa-radio-item value="24" label="Last 24 hours"></goa-radio-item>
<goa-radio-item value="72" label="Last 72 hours"></goa-radio-item>
</goa-radio-group>
</goa-form-item>
<div slot="actions">
<goa-button-group>
<goa-button version="2" id="apply-filters-btn" type="primary" size="compact">Apply filters</goa-button>
<goa-button version="2" id="cancel-btn" type="tertiary" size="compact">Cancel</goa-button>
</goa-button-group>
</div>
</goa-drawer>const [open, setOpen] = useState(false);
const [type, setType] = useState<string>();
const [name, setName] = useState<string>();
const [description, setDescription] = useState<string>();<GoabxButton type="tertiary" leadingIcon="add" onClick={() => setOpen(true)}>
Add another item
</GoabxButton>
<GoabxModal
heading="Add a new item"
open={open}
actions={
<GoabButtonGroup alignment="end">
<GoabxButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
Cancel
</GoabxButton>
<GoabxButton type="primary" size="compact" onClick={() => setOpen(false)}>
Save new item
</GoabxButton>
</GoabButtonGroup>
}
>
<p>Fill in the information to create a new item</p>
<GoabxFormItem label="Type" mt="l">
<GoabxDropdown onChange={(e) => setType(e.value)} value={type}>
<GoabxDropdownItem value="1" label="Option 1" />
<GoabxDropdownItem value="2" label="Option 2" />
</GoabxDropdown>
</GoabxFormItem>
<GoabxFormItem label="Name" mt="l">
<GoabxInput
onChange={(e) => setName(e.value)}
value={name}
name="name"
width="100%"
/>
</GoabxFormItem>
<GoabxFormItem label="Description" mt="l">
<GoabxTextArea
name="description"
rows={3}
width="100%"
onChange={(e) => setDescription(e.value)}
value={description}
/>
</GoabxFormItem>
</GoabxModal>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;
}<goabx-button type="tertiary" leadingIcon="add" (onClick)="toggleModal()">Add another item</goabx-button>
<goabx-modal [open]="open" (onClose)="toggleModal()" heading="Add a new item" [actions]="actions">
<p>Fill in the information to create a new item</p>
<goabx-form-item label="Type" mt="l">
<goabx-dropdown (onChange)="updateType($event)" [value]="type">
<goabx-dropdown-item value="1" label="Option 1"></goabx-dropdown-item>
<goabx-dropdown-item value="2" label="Option 2"></goabx-dropdown-item>
</goabx-dropdown>
</goabx-form-item>
<goabx-form-item label="Name" mt="l">
<goabx-input name="name" width="100%" (onChange)="updateName($event)" [value]="name"></goabx-input>
</goabx-form-item>
<goabx-form-item label="Description" mt="l">
<goabx-textarea name="description" width="100%" [rows]="3" (onChange)="updateDescription($event)" [value]="description"></goabx-textarea>
</goabx-form-item>
<ng-template #actions>
<goab-button-group alignment="end">
<goabx-button type="tertiary" size="compact" (onClick)="toggleModal()">Cancel</goabx-button>
<goabx-button type="primary" size="compact" (onClick)="toggleModal()">Save new item</goabx-button>
</goab-button-group>
</ng-template>
</goabx-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 long answer question with a maximum word count
const [value, setValue] = useState("");<GoabxFormItem
label="Provide more detail"
helpText="Maximum 500 words. Do not include personal or financial information."
>
<GoabxTextArea
name="program"
onChange={(e) => setValue(e.value)}
value={value}
width="100%"
rows={6}
maxCount={500}
countBy="word"
/>
</GoabxFormItem>form!: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
program: [""],
});
}<goabx-form-item
label="Provide more detail"
helpText="Maximum 500 words. Do not include personal or financial information.">
<goabx-textarea
name="program"
[formControl]="form.controls.program"
width="100%"
[rows]="6"
[maxCount]="500"
countBy="word">
</goabx-textarea>
</goabx-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>Ask a user for a birthday
const [birthdate, setBirthdate] = useState<Date | undefined>(undefined);<GoabxFormItem label="What is your date of birth?">
<GoabxDatePicker
name="birthdate"
type="input"
value={birthdate}
onChange={(e) => setBirthdate(e.value)}
/>
</GoabxFormItem>birthdate: Date | undefined;
onDateChange(event: { value: Date }) {
this.birthdate = event.value;
}<goabx-form-item label="What is your date of birth?">
<goabx-date-picker
name="birthdate"
type="input"
[value]="birthdate"
(onChange)="onDateChange($event)">
</goabx-date-picker>
</goabx-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>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>
<GoabxFormItem label="Street Address">
<GoabxInput
name="address"
type="text"
value={address}
onChange={(e) => setAddress(e.value)}
width="100%"
/>
</GoabxFormItem>
<GoabxFormItem label="Suite or unit #" mt="l">
<GoabxInput
name="suite"
type="text"
value={suite}
onChange={(e) => setSuite(e.value)}
width="100%"
/>
</GoabxFormItem>
<GoabxFormItem label="City or town" mt="l">
<GoabxInput
name="city"
type="text"
value={city}
onChange={(e) => setCity(e.value)}
width="100%"
/>
</GoabxFormItem>
<GoabBlock direction="row" gap="l" mt="l">
<GoabxFormItem label="Province or territory">
<GoabxDropdown
onChange={(e) => setProvince(e.value ?? "")}
name="province"
value={province}
>
<GoabxDropdownItem label="Alberta" value="AB" />
<GoabxDropdownItem label="British Columbia" value="BC" />
<GoabxDropdownItem label="Manitoba" value="MB" />
<GoabxDropdownItem label="New Brunswick" value="NB" />
<GoabxDropdownItem label="Newfoundland and Labrador" value="NL" />
<GoabxDropdownItem label="Northwest Territories" value="NT" />
<GoabxDropdownItem label="Nova Scotia" value="NS" />
<GoabxDropdownItem label="Nunavut" value="NU" />
<GoabxDropdownItem label="Ontario" value="ON" />
<GoabxDropdownItem label="Prince Edward Island" value="PE" />
<GoabxDropdownItem label="Quebec" value="QC" />
<GoabxDropdownItem label="Saskatchewan" value="SK" />
<GoabxDropdownItem label="Yukon" value="YT" />
</GoabxDropdown>
</GoabxFormItem>
<GoabxFormItem label="Postal Code">
<GoabxInput
name="postalCode"
type="text"
value={postalCode}
onChange={(e) => setPostalCode(e.value)}
width="7ch"
/>
</GoabxFormItem>
</GoabBlock>
<GoabButtonGroup alignment="start" mt="2xl">
<GoabxButton type="primary" onClick={() => {}}>
Save and continue
</GoabxButton>
<GoabxButton type="secondary" onClick={() => {}}>
Cancel
</GoabxButton>
</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>
<goabx-form-item label="Street Address">
<goabx-input name="address" type="text" [formControl]="form.controls.address" width="100%"></goabx-input>
</goabx-form-item>
<goabx-form-item label="Suite or unit #" mt="l">
<goabx-input name="suite" type="text" [formControl]="form.controls.suite" width="100%"></goabx-input>
</goabx-form-item>
<goabx-form-item label="City or town" mt="l">
<goabx-input name="city" type="text" [formControl]="form.controls.city" width="100%"></goabx-input>
</goabx-form-item>
<goab-block direction="row" gap="l" mt="l">
<goabx-form-item label="Province or territory">
<goabx-dropdown name="province" [formControl]="form.controls.province">
<goabx-dropdown-item label="Alberta" value="AB"></goabx-dropdown-item>
<goabx-dropdown-item label="British Columbia" value="BC"></goabx-dropdown-item>
<goabx-dropdown-item label="Manitoba" value="MB"></goabx-dropdown-item>
<goabx-dropdown-item label="New Brunswick" value="NB"></goabx-dropdown-item>
<goabx-dropdown-item label="Newfoundland and Labrador" value="NL"></goabx-dropdown-item>
<goabx-dropdown-item label="Northwest Territories" value="NT"></goabx-dropdown-item>
<goabx-dropdown-item label="Nova Scotia" value="NS"></goabx-dropdown-item>
<goabx-dropdown-item label="Nunavut" value="NU"></goabx-dropdown-item>
<goabx-dropdown-item label="Ontario" value="ON"></goabx-dropdown-item>
<goabx-dropdown-item label="Prince Edward Island" value="PE"></goabx-dropdown-item>
<goabx-dropdown-item label="Quebec" value="QC"></goabx-dropdown-item>
<goabx-dropdown-item label="Saskatchewan" value="SK"></goabx-dropdown-item>
<goabx-dropdown-item label="Yukon" value="YT"></goabx-dropdown-item>
</goabx-dropdown>
</goabx-form-item>
<goabx-form-item label="Postal Code">
<goabx-input name="postalCode" type="text" [formControl]="form.controls.postalCode" width="7ch"></goabx-input>
</goabx-form-item>
</goab-block>
<goab-button-group alignment="start" mt="2xl">
<goabx-button type="primary" (onClick)="onClick()">Save and continue</goabx-button>
<goabx-button type="secondary" (onClick)="onClick()">Cancel</goabx-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">
<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("");<GoabxFormItem label="Indian registration number" labelSize="large">
<GoabBlock gap="m" direction="row">
<GoabxFormItem label="Band #" helpText="3 digits">
<GoabxInput
onChange={(e) => setBandNo(e.value)}
value={bandNo}
name="bandNo"
width="88px"
maxLength={3}
/>
</GoabxFormItem>
<GoabxFormItem label="Family" helpText="Up to 5 digits">
<GoabxInput
onChange={(e) => setFamily(e.value)}
value={family}
name="family"
width="105px"
maxLength={5}
/>
</GoabxFormItem>
<GoabxFormItem label="Position" helpText="2 digits">
<GoabxInput
onChange={(e) => setPosition(e.value)}
value={position}
name="position"
width="71px"
maxLength={2}
/>
</GoabxFormItem>
</GoabBlock>
</GoabxFormItem>form!: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
bandNo: [""],
family: [""],
position: [""],
});
}<goabx-form-item label="Indian registration number" labelSize="large">
<goab-block gap="m" direction="row">
<goabx-form-item label="Band #" helpText="3 digits">
<goabx-input
[formControl]="form.controls.bandNo"
name="bandNo"
width="88px"
[maxLength]="3">
</goabx-input>
</goabx-form-item>
<goabx-form-item label="Family" helpText="Up to 5 digits">
<goabx-input
[formControl]="form.controls.family"
name="family"
width="105px"
[maxLength]="5">
</goabx-input>
</goabx-form-item>
<goabx-form-item label="Position" helpText="2 digits">
<goabx-input
[formControl]="form.controls.position"
name="position"
width="71px"
[maxLength]="2">
</goabx-input>
</goabx-form-item>
</goab-block>
</goabx-form-item>["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 as="h1" size="heading-l" mt="none" mb="m">Direct deposit information</GoabText>
<GoabText 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.
</GoabText>
<form>
<GoabxFormItem
label="Bank or Institution number"
helpText="3-4 digits in length"
>
<GoabxInput
maxLength={4}
name="bankNumber"
onChange={(e) => setBankNumber(e.value)}
value={bankNumber}
ariaLabel="bankNumber"
width="88px"
/>
</GoabxFormItem>
<GoabxFormItem
label="Branch or Transit number"
helpText="5 digits in length"
mt="l"
>
<GoabxInput
maxLength={5}
name="transitNumber"
onChange={(e) => setTransitNumber(e.value)}
value={transitNumber}
ariaLabel="transitNumber"
width="143px"
/>
</GoabxFormItem>
<GoabxFormItem
label="Account number"
helpText="3-12 digits in length"
mt="l"
>
<GoabxInput
maxLength={12}
name="accountNumber"
value={accountNumber}
onChange={(e) => setAccountNumber(e.value)}
ariaLabel="accountNumber"
/>
</GoabxFormItem>
</form>
<GoabDetails heading="Where can I find this information on a personal cheque?" mt="l">
<GoabText as="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>
<GoabxButton type="submit" mt="2xl">
Save and continue
</GoabxButton>form!: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
bankNumber: [""],
transitNumber: [""],
accountNumber: [""],
});
}<goab-text as="h1" size="heading-l" mt="none" mb="m">Direct deposit information</goab-text>
<goab-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.
</goab-text>
<form [formGroup]="form">
<goabx-form-item
label="Bank or Institution number"
helpText="3-4 digits in length">
<goabx-input
[maxLength]="4"
name="bankNumber"
[formControl]="form.controls.bankNumber"
ariaLabel="bankNumber"
width="88px">
</goabx-input>
</goabx-form-item>
<goabx-form-item
label="Branch or Transit number"
helpText="5 digits in length"
mt="l">
<goabx-input
[maxLength]="5"
name="transitNumber"
[formControl]="form.controls.transitNumber"
ariaLabel="transitNumber"
width="143px">
</goabx-input>
</goabx-form-item>
<goabx-form-item
label="Account number"
helpText="3-12 digits in length"
mt="l">
<goabx-input
[maxLength]="12"
name="accountNumber"
[formControl]="form.controls.accountNumber"
ariaLabel="accountNumber">
</goabx-input>
</goabx-form-item>
</form>
<goab-details heading="Where can I find this information on a personal cheque?" mt="l">
<goab-text as="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>
<goabx-button type="submit" mt="2xl" (onClick)="onSubmit()">
Save and continue
</goabx-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>const [tuitionAmount, setTuitionAmount] = useState("");
const [suppliesAmount, setSuppliesAmount] = useState("");
const [othersAmount, setOthersAmount] = useState("");<GoabxFormItem label="Tuition">
<GoabxInput
onChange={(e) => setTuitionAmount(e.value)}
value={tuitionAmount}
name="tuitionAmount"
leadingContent="$"
/>
</GoabxFormItem>
<GoabxFormItem label="Books/Supplies/Instruments" mt="l">
<GoabxInput
onChange={(e) => setSuppliesAmount(e.value)}
value={suppliesAmount}
name="suppliesAmount"
leadingContent="$"
/>
</GoabxFormItem>
<GoabxFormItem label="Other costs" mt="l">
<GoabxInput
onChange={(e) => setOthersAmount(e.value)}
value={othersAmount}
name="othersAmount"
leadingContent="$"
/>
</GoabxFormItem>costFormGroup = new FormGroup({
tuitionFeeAmount: new FormControl(""),
suppliesAmount: new FormControl(""),
othersAmount: new FormControl(""),
});<form [formGroup]="costFormGroup">
<goabx-form-item label="Tuition">
<goabx-input name="tuition" formControlName="tuitionFeeAmount">
<div slot="leadingContent">$</div>
</goabx-input>
</goabx-form-item>
<goabx-form-item label="Books/Supplies/Instruments" mt="l">
<goabx-input name="book" formControlName="suppliesAmount">
<div slot="leadingContent">$</div>
</goabx-input>
</goabx-form-item>
<goabx-form-item label="Other costs" mt="l">
<goabx-input name="others" formControlName="othersAmount">
<div slot="leadingContent">$</div>
</goabx-input>
</goabx-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>Ask a user one question at a time
<GoabxLink leadingIcon="arrow-back" size="small">
<a href="#">Back</a>
</GoabxLink>
<GoabxFormItem
mt="xl"
label="Are you currently in school?"
labelSize="large"
helpText="School includes foundational, skills and employment training, micro-credentials, post-secondary and continuing education.">
<GoabxRadioGroup name="school" ariaLabel="are you currently in school?" onChange={() => {}}>
<GoabxRadioItem value="yes" label="Yes" />
<GoabxRadioItem value="no" label="No" />
</GoabxRadioGroup>
</GoabxFormItem>
<GoabxButton type="submit" mt="2xl">
Save and continue
</GoabxButton>a.back-link::before {
content: "";
display: inline-block;
width: 42px;
height: 24px;
vertical-align: middle;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}
a.back-link:visited::before,
a.back-link:hover::before {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}
a.back-link {
margin-top: var(--goa-space-m);
}selectedValue = "";
onSchoolChange(event: Event): void {
const detail = (event as CustomEvent).detail;
this.selectedValue = detail.value;
}<goabx-link leadingIcon="arrow-back" size="small">
<a href="#">Back</a>
</goabx-link>
<goabx-form-item
mt="xl"
label="Are you currently in school?"
labelSize="large"
helpText="School includes foundational, skills and employment training, micro-credentials, post-secondary and continuing education.">
<goabx-radio-group name="school" ariaLabel="are you currently in school?" (onChange)="onSchoolChange($event)">
<goabx-radio-item value="yes" label="Yes"></goabx-radio-item>
<goabx-radio-item value="no" label="No"></goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>
<goabx-button type="submit" mt="2xl">
Save and continue
</goabx-button>document.querySelector('goa-radio-group').addEventListener('_change', (e) => {
console.log('Selected:', e.detail.value);
});<goa-link leadingicon="arrow-back" size="small">
<a href="#">Back</a>
</goa-link>
<goa-form-item version="2"
mt="xl"
label="Are you currently in school?"
labelsize="large"
helptext="School includes foundational, skills and employment training, micro-credentials, post-secondary and continuing education.">
<goa-radio-group version="2" name="school" aria-label="are you currently in school?">
<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-button version="2" type="submit" mt="2xl">
Save and continue
</goa-button>Confirm a change
const [open, setOpen] = useState(false);
const [effectiveDate, setEffectiveDate] = useState<Date | undefined>(new Date());
const onChangeEffectiveDate = (detail: GoabDatePickerOnChangeDetail) => {
setEffectiveDate(detail.value as Date);
};<GoabxButton onClick={() => setOpen(true)}>Save and continue</GoabxButton>
<GoabxModal
heading="Address has changed"
open={open}
onClose={() => setOpen(false)}
actions={
<GoabButtonGroup alignment="end">
<GoabxButton type="secondary" size="compact" onClick={() => setOpen(false)}>
Undo address change
</GoabxButton>
<GoabxButton type="primary" size="compact" onClick={() => setOpen(false)}>
Confirm
</GoabxButton>
</GoabButtonGroup>
}>
<GoabContainer type="non-interactive" accent="filled" padding="compact" width="full">
<GoabText as="h4" mt="none" mb="s">Before</GoabText>
<GoabText mt="none">123456 78 Ave NW, Edmonton, Alberta</GoabText>
<GoabText as="h4" mt="none" mb="s">After</GoabText>
<GoabText mt="none" mb="none">881 12 Ave NW, Edmonton, Alberta</GoabText>
</GoabContainer>
<GoabxFormItem label="Effective date" mt="l">
<GoabxDatePicker
onChange={onChangeEffectiveDate}
name="effectiveDate"
value={effectiveDate}
/>
</GoabxFormItem>
</GoabxModal>open = false;
effectiveDate = new Date();
toggleModal(): void {
this.open = !this.open;
}
onChangeEffectiveDate(event: GoabDatePickerOnChangeDetail): void {
this.effectiveDate = event.value as Date;
}<goabx-button (onClick)="toggleModal()">Save and continue</goabx-button>
<goabx-modal [open]="open" (onClose)="toggleModal()" heading="Address has changed" [actions]="actions">
<goab-container type="non-interactive" accent="filled" padding="compact" width="full">
<goab-text as="h4" mt="none" mb="s">Before</goab-text>
<goab-text mt="none">123456 78 Ave NW, Edmonton, Alberta</goab-text>
<goab-text as="h4" mt="none" mb="s">After</goab-text>
<goab-text mt="none" mb="none">881 12 Ave NW, Edmonton, Alberta</goab-text>
</goab-container>
<goabx-form-item label="Effective date" mt="l">
<goabx-date-picker (onChange)="onChangeEffectiveDate($event)" name="effectiveDate" [value]="effectiveDate"></goabx-date-picker>
</goabx-form-item>
<ng-template #actions>
<goab-button-group alignment="end">
<goabx-button type="secondary" size="compact" (onClick)="toggleModal()">
Undo address change
</goabx-button>
<goabx-button type="primary" size="compact" (onClick)="toggleModal()">
Confirm
</goabx-button>
</goab-button-group>
</ng-template>
</goabx-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>
<GoabxFormItem label="Name" requirement="required">
<GoabxInput
name="input"
type="text"
onChange={handleInputChange}
value={inputValue}
width="100%"
/>
</GoabxFormItem>
<GoabButtonGroup alignment="start" mt="xl">
<GoabxButton disabled={inputValue.trim() === ""} onClick={handleConfirm}>
Confirm
</GoabxButton>
<GoabxButton type="secondary" onClick={handleCancel}>
Cancel
</GoabxButton>
</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>
<goabx-form-item label="Name" requirement="required">
<goabx-input
name="input"
type="text"
(onChange)="onInputChange($event)"
[value]="inputValue"
width="100%">
</goabx-input>
</goabx-form-item>
<goab-button-group alignment="start" mt="xl">
<goabx-button [disabled]="isDisabled" (onClick)="onConfirm()">
Confirm
</goabx-button>
<goabx-button type="secondary" (onClick)="onCancel()">
Cancel
</goabx-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 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);
}<GoabxFormItem
requirement="required"
label="Name of item"
error={taskError ? "Please enter item name" : undefined}
helpText="Add an item to the dropdown list below">
<GoabxInput
onChange={(event: GoabInputOnChangeDetail) => setNewTask(event.value)}
name="item"
value={newTask}
/>
</GoabxFormItem>
<GoabxFormItem mt="l" label="Add to">
<GoabxRadioGroup
name="mountType"
onChange={(event: GoabRadioGroupOnChangeDetail) => onMountTypeChange(event.value)}
value={mountType}
orientation="horizontal">
<GoabxRadioItem value="prepend" label="Start" />
<GoabxRadioItem value="append" label="End" />
</GoabxRadioGroup>
</GoabxFormItem>
<GoabButtonGroup alignment="start" gap="relaxed" mt="l">
<GoabxButton type="primary" onClick={addTask}>
Add new item
</GoabxButton>
<GoabxButton type="tertiary" onClick={reset}>
Reset list
</GoabxButton>
</GoabButtonGroup>
<GoabDivider mt="l" />
<GoabxFormItem mt="l" label="All items">
<div style={{ width: isReset ? "320px" : "auto" }}>
<GoabxDropdown
key={tasks.length}
onChange={(event: GoabDropdownOnChangeDetail) =>
setSelectedTask(event.value as string)
}
value={selectedTask}
name="selectedTask">
{tasks.map(task => (
<GoabxDropdownItem
key={task.value}
value={task.value}
mountType={task.mount}
label={task.label}
/>
))}
</GoabxDropdown>
</div>
</GoabxFormItem>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;
}<goabx-form-item
requirement="required"
label="Name of item"
[error]="taskError ? 'Please enter item name' : undefined"
helpText="Add an item to the dropdown list below">
<goabx-input
name="item"
[value]="newTask"
(onChange)="onNewTaskChange($event)">
</goabx-input>
</goabx-form-item>
<goabx-form-item mt="l" label="Add to">
<goabx-radio-group
name="mountType"
[value]="mountType"
orientation="horizontal"
(onChange)="onMountTypeChange($event)">
<goabx-radio-item value="prepend" label="Start"></goabx-radio-item>
<goabx-radio-item value="append" label="End"></goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>
<goab-button-group alignment="start" gap="relaxed" mt="l">
<goabx-button type="primary" (onClick)="addTask()">
Add new item
</goabx-button>
<goabx-button type="tertiary" (onClick)="reset()">
Reset list
</goabx-button>
</goab-button-group>
<goab-divider mt="l"></goab-divider>
<goabx-form-item mt="l" label="All items">
<ng-container *ngIf="renderTrigger">
<goabx-dropdown
[value]="selectedTask"
name="selectedTask"
(onChange)="onSelectedTaskChange($event)">
<goabx-dropdown-item
*ngFor="let task of tasks; trackBy: trackByFn"
[value]="task.value"
[mountType]="task.mount"
[label]="task.label">
</goabx-dropdown-item>
</goabx-dropdown>
</ng-container>
</goabx-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>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");
};<GoabxFormItem
label="Size"
requirement="optional"
helpText="Choose the size to change the list below">
<GoabxDropdown
name="parent"
placeholder="Select a value"
onChange={(event: GoabDropdownOnChangeDetail) =>
loadItems(event.value as string)
}>
{parents.map(parent => (
<GoabxDropdownItem key={parent} value={parent} label={parent} />
))}
</GoabxDropdown>
</GoabxFormItem>
<GoabxFormItem label="Items" requirement="optional" mt="xl">
<GoabxDropdown name="children" placeholder="Select a value" onChange={logSelection}>
{children.map((child) => (
<GoabxDropdownItem
key={crypto.randomUUID()}
value={child}
label={child}
mountType="reset"
/>
))}
</GoabxDropdown>
</GoabxFormItem><div [formGroup]="changeForm" style="padding: 40px;">
<goabx-form-item label="Size" requirement="optional" helpText="Choose the size to change the list below">
<goabx-dropdown formControlName="parentDropdown" placeholder="Select a value" name="parent">
<goabx-dropdown-item *ngFor="let parent of parents" [value]="parent" [label]="parent" />
</goabx-dropdown>
</goabx-form-item>
<goabx-form-item label="Items" requirement="optional" mt="xl">
<goabx-dropdown formControlName="childDropdown" placeholder="Select a value" name="children">
<ng-container *ngIf="children.length > 0">
<goabx-dropdown-item
*ngFor="let child of children; trackBy: generateUniqueKey"
[value]="child"
[label]="child"
[mountType]="'reset'"
/>
</ng-container>
</goabx-dropdown>
</goabx-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>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]);<GoabxFormItem id="filterChipInput" error={inputError} mb="m">
<GoabBlock gap="xs" direction="row" alignment="start" width="100%">
<div style={{ flex: 1 }}>
<GoabxInput
name="filterChipInput"
aria-labelledby="filterChipInput"
value={inputValue}
leadingIcon="search"
width="100%"
onChange={handleInputChange}
onKeyPress={handleInputKeyPress}
/>
</div>
<GoabxButton type="secondary" onClick={applyFilter} leadingIcon="filter">
Filter
</GoabxButton>
</GoabBlock>
</GoabxFormItem>
{typedChips.length > 0 && (
<div>
<GoabText tag="span" color="secondary" mb="xs" mr="xs">
Filter:
</GoabText>
{typedChips.map((typedChip, index) => (
<GoabxFilterChip
key={index}
content={typedChip}
mb="xs"
mr="xs"
onClick={() => removeTypedChip(typedChip)}
/>
))}
<GoabxButton type="tertiary" size="compact" mb="xs" onClick={() => setTypedChips([])}>
Clear all
</GoabxButton>
</div>
)}
<GoabxTable width="full">
<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>
<GoabxBadge 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>
</GoabxTable>
{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())
);
}<goabx-form-item id="filterChipInput" [error]="inputError" mb="m">
<goab-block gap="xs" direction="row" alignment="start" width="100%">
<div style="flex: 1;">
<goabx-input
name="filterChipInput"
aria-labelledby="filterChipInput"
[value]="inputValue"
leadingIcon="search"
width="100%"
(onChange)="handleInputChange($event)"
(onKeyPress)="handleInputKeyPress($event)">
</goabx-input>
</div>
<goabx-button type="secondary" (onClick)="applyFilter()" leadingIcon="filter">
Filter
</goabx-button>
</goab-block>
</goabx-form-item>
<ng-container *ngIf="typedChips.length > 0">
<goab-text tag="span" color="secondary" mb="xs" mr="xs">
Filter:
</goab-text>
<goabx-filter-chip
*ngFor="let typedChip of typedChips; let index = index"
[content]="typedChip"
mb="xs"
mr="xs"
(onClick)="removeTypedChip(typedChip)">
</goabx-filter-chip>
<goabx-button type="tertiary" size="compact" mb="xs" (onClick)="removeAllTypedChips()">
Clear all
</goabx-button>
</ng-container>
<goabx-table width="full">
<thead>
<tr>
<th>Status</th>
<th>Name</th>
<th class="goa-table-number-header">ID Number</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of dataFiltered">
<td>
<goabx-badge [type]="item.status.type" [content]="item.status.text" [icon]="false"></goabx-badge>
</td>
<td>{{ item.name }}</td>
<td class="goa-table-number-column">{{ item.id }}</td>
</tr>
</tbody>
</goabx-table>
<goab-block mt="l" mb="l" *ngIf="dataFiltered.length === 0 && data.length > 0">
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 tag="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>Give background information before asking a question
const [selectedValue, setSelectedValue] = useState<string>("");
const handleChange = (event: GoabRadioGroupOnChangeDetail) => {
setSelectedValue(event.value as string);
};
const handleSubmit = () => {
console.log("Selected:", selectedValue);
};<GoabxLink leadingIcon="arrow-back" size="small" mb="none">
Back
</GoabxLink>
<GoabText as="h2" mt="xl" mb="m">Current school status</GoabText>
<GoabText mt="none" mb="s">
School can encompass foundational programs that help individuals gain basic skills for
further learning and living, such as literacy and numeracy courses. It also includes
skills and employment training programs, designed to equip you with specific skills for
the job market.
</GoabText>
<GoabText mt="none" mb="s">
Post-secondary education, such as Bachelor's, Master's, or Doctoral degrees, and
continuing education courses for professional or personal development, are also
categorized under 'school'.
</GoabText>
<GoabText mt="none" mb="xl">
Contact your provider if you're concerned about your school status.
</GoabText>
<GoabxFormItem label="Are you currently in school?">
<GoabxRadioGroup
name="school"
ariaLabel="are you currently in school?"
onChange={handleChange}>
<GoabxRadioItem value="yes" label="Yes" />
<GoabxRadioItem value="no" label="No" />
</GoabxRadioGroup>
</GoabxFormItem>
<GoabxButton type="submit" mt="2xl" onClick={handleSubmit}>
Save and continue
</GoabxButton>
);
}h2.section-title {
margin-bottom: var(--goa-space-l);
}
a.back-link::before {
content: "";
display: inline-block;
width: 42px;
height: 24px;
vertical-align: middle;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}
a.back-link:visited::before,
a.back-link:hover::before {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}
a.back-link {
margin-top: var(--goa-space-m);
}
:host a.back-link + h2 {
margin-top: var(--goa-space-2xl);
}selectedValue = "";
onChange(event: GoabRadioGroupOnChangeDetail): void {
this.selectedValue = event.value as string;
}
onSubmit(): void {
console.log("Selected:", this.selectedValue);
}<goabx-link leadingIcon="arrow-back" size="small" mb="none">
Back
</goabx-link>
<goab-text as="h2" mt="xl" mb="m">Current school status</goab-text>
<goab-text mt="none" mb="s">
School can encompass foundational programs that help individuals gain basic skills for
further learning and living, such as literacy and numeracy courses. It also includes
skills and employment training programs, designed to equip you with specific skills for
the job market.
</goab-text>
<goab-text mt="none" mb="s">
Post-secondary education, such as Bachelor's, Master's, or Doctoral degrees, and
continuing education courses for professional or personal development, are also
categorized under 'school'.
</goab-text>
<goab-text mt="none" mb="xl">
Contact your provider if you're concerned about your school status.
</goab-text>
<goabx-form-item label="Are you currently in school?">
<goabx-radio-group
name="school"
ariaLabel="are you currently in school?"
(onChange)="onChange($event)">
<goabx-radio-item value="yes" label="Yes"></goabx-radio-item>
<goabx-radio-item value="no" label="No"></goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>
<goabx-button type="submit" mt="2xl" (onClick)="onSubmit()">
Save and continue
</goabx-button>const radioGroup = document.getElementById('school-radio');
const submitBtn = document.getElementById('submit-btn');
let selectedValue = '';
radioGroup.addEventListener('_change', (e) => {
selectedValue = e.detail.value;
});
submitBtn.addEventListener('_click', () => {
console.log('Selected:', selectedValue);
});<goa-link leadingicon="arrow-back" size="small" mb="none">
Back
</goa-link>
<goa-text as="h2" mt="xl" mb="m">Current school status</goa-text>
<goa-text mt="none" mb="s">
School can encompass foundational programs that help individuals gain basic skills for
further learning and living, such as literacy and numeracy courses. It also includes
skills and employment training programs, designed to equip you with specific skills for
the job market.
</goa-text>
<goa-text mt="none" mb="s">
Post-secondary education, such as Bachelor's, Master's, or Doctoral degrees, and
continuing education courses for professional or personal development, are also
categorized under 'school'.
</goa-text>
<goa-text mt="none" mb="xl">
Contact your provider if you're concerned about your school status.
</goa-text>
<goa-form-item version="2" label="Are you currently in school?">
<goa-radio-group version="2" id="school-radio" name="school" arialabel="are you currently in school?">
<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-button version="2" id="submit-btn" type="submit" mt="2xl">
Save and continue
</goa-button>Give context before asking a long answer question
const [textValue, setTextValue] = useState("");
const handleChange = (event: GoabTextAreaOnChangeDetail) => {
setTextValue(event.value);
};
const handleContinue = () => {
console.log("Submitted:", textValue);
};<GoabxLink leadingIcon="arrow-back" size="small" mb="none">
Back
</GoabxLink>
<GoabText as="h2" mt="xl" mb="m">Submit a question about your benefits</GoabText>
<GoabText mt="none" mb="xl">
If you need clarification about your benefit eligibility, payment schedule, or application status, submit your
question here.
</GoabText>
<form>
<GoabxFormItem
label="Provide details about your situation"
helpText="Include specific details to help us answer your question quickly.">
<GoabxTextArea
name="program"
onChange={handleChange}
value={textValue}
maxCount={400}
countBy="character"
/>
</GoabxFormItem>
</form>
<GoabDetails mt="m" heading="What kind of information is useful?">
<p>
Include your benefit program name, mention any recent correspondence you received and/or provide any
relevant case or reference numbers.
</p>
</GoabDetails>
<GoabButtonGroup alignment="start" mt="2xl">
<GoabxButton type="primary" onClick={handleContinue}>
Continue
</GoabxButton>
</GoabButtonGroup>form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
program: [""]
});
}
onContinue(): void {
console.log("Submitted:", this.form.get("program")?.value);
}<goabx-link leadingIcon="arrow-back" size="small" mb="none">
Back
</goabx-link>
<goab-text as="h2" mt="xl" mb="m">Submit a question about your benefits</goab-text>
<goab-text mt="none" mb="xl">
If you need clarification about your benefit eligibility, payment schedule, or application status, submit your
question here.
</goab-text>
<form [formGroup]="form">
<goabx-form-item
label="Provide details about your situation"
helpText="Include specific details to help us answer your question quickly.">
<goabx-textarea
formControlName="program"
name="program"
[maxCount]="400"
countBy="character">
</goabx-textarea>
</goabx-form-item>
</form>
<goab-details mt="m" heading="What kind of information is useful?">
<p>
Include your benefit program name, mention any recent correspondence you received and/or provide any
relevant case or reference numbers.
</p>
</goab-details>
<goab-button-group alignment="start" mt="2xl">
<goabx-button type="primary" (onClick)="onContinue()">
Continue
</goabx-button>
</goab-button-group>const textarea = document.getElementById('program-textarea');
const continueBtn = document.getElementById('continue-btn');
continueBtn.addEventListener('_click', () => {
console.log('Submitted:', textarea.value);
});<goa-link leadingicon="arrow-back" size="small" mb="none">
Back
</goa-link>
<goa-text as="h2" mt="xl" mb="m">Submit a question about your benefits</goa-text>
<goa-text mt="none" mb="xl">
If you need clarification about your benefit eligibility, payment schedule, or application status, submit your
question here.
</goa-text>
<form>
<goa-form-item version="2"
label="Provide details about your situation"
helptext="Include specific details to help us answer your question quickly.">
<goa-textarea version="2"
id="program-textarea"
name="program"
maxcount="400"
countby="character">
</goa-textarea>
</goa-form-item>
</form>
<goa-details mt="m" heading="What kind of information is useful?">
<p>
Include your benefit program name, mention any recent correspondence you received and/or provide any
relevant case or reference numbers.
</p>
</goa-details>
<goa-button-group alignment="start" mt="2xl">
<goa-button version="2" id="continue-btn" type="primary">
Continue
</goa-button>
</goa-button-group>Group related questions together on a question page
const [addressLine1, setAddressLine1] = useState("");
const [addressLine2, setAddressLine2] = useState("");
const [townCity, setTownCity] = useState("");
const [province, setProvince] = useState("");
const [postalCode, setPostalCode] = useState("");<GoabxLink leadingIcon="arrow-back" size="small" mb="none">
Back
</GoabxLink>
<GoabText as="h2" mt="xl" mb="m">Your address</GoabText>
<GoabText mt="none" mb="xl">This is the home address of the person applying</GoabText>
<GoabxFormItem label="Address line 1">
<GoabxInput
onChange={(event) => setAddressLine1(event.value)}
value={addressLine1}
name="address-line-1"
ariaLabel="Address line 1"
width="100%"
/>
</GoabxFormItem>
<GoabxFormItem label="Address line 2" mt="l">
<GoabxInput
onChange={(event) => setAddressLine2(event.value)}
value={addressLine2}
name="address-line-2"
ariaLabel="Address line 2"
width="100%"
/>
</GoabxFormItem>
<GoabxFormItem label="Town or city" mt="l">
<GoabxInput
onChange={(event) => setTownCity(event.value)}
value={townCity}
name="town-city"
ariaLabel="Town or city name"
width="460px"
/>
</GoabxFormItem>
<GoabxFormItem label="Province or territory" mt="l" id="provinceLabel">
<GoabxDropdown
onChange={(event) => setProvince(event.value ?? "")}
value={province}
name="province-territory"
ariaLabelledBy="provinceLabel"
>
<GoabxDropdownItem value="AB" label="Alberta" />
<GoabxDropdownItem value="BC" label="British Columbia" />
<GoabxDropdownItem value="MB" label="Manitoba" />
<GoabxDropdownItem value="NB" label="New Brunswick" />
<GoabxDropdownItem value="NL" label="Newfoundland and Labrador" />
<GoabxDropdownItem value="NS" label="Nova Scotia" />
<GoabxDropdownItem value="ON" label="Ontario" />
<GoabxDropdownItem value="PE" label="Prince Edward Island" />
<GoabxDropdownItem value="QC" label="Quebec" />
<GoabxDropdownItem value="SK" label="Saskatchewan" />
<GoabxDropdownItem value="NT" label="Northwest Territories" />
<GoabxDropdownItem value="NU" label="Nunavut" />
<GoabxDropdownItem value="YT" label="Yukon" />
</GoabxDropdown>
</GoabxFormItem>
<GoabxFormItem label="Postal code" mt="l">
<GoabxInput
onChange={(event) => setPostalCode(event.value)}
value={postalCode}
name="postal-code"
width="105px"
/>
</GoabxFormItem>
<GoabxButton type="submit" mt="2xl">
Save and continue
</GoabxButton>addressLine1 = "";
addressLine2 = "";
townCity = "";
province = "";
postalCode = "";
onAddressLine1Change(value: string): void {
this.addressLine1 = value;
}
onAddressLine2Change(value: string): void {
this.addressLine2 = value;
}
onTownCityChange(value: string): void {
this.townCity = value;
}
onProvinceChange(value: string): void {
this.province = value;
}
onPostalCodeChange(value: string): void {
this.postalCode = value;
}
onSubmit(): void {
console.log("Form submitted");
}<goabx-link leadingIcon="arrow-back" size="small" mb="none">
Back
</goabx-link>
<goab-text as="h2" mt="xl" mb="m">Your address</goab-text>
<goab-text mt="none" mb="xl">This is the home address of the person applying</goab-text>
<goabx-form-item label="Address line 1">
<goabx-input
(onChange)="onAddressLine1Change($event)"
[value]="addressLine1"
name="address-line-1"
ariaLabel="Address line 1"
width="100%">
</goabx-input>
</goabx-form-item>
<goabx-form-item label="Address line 2" mt="l">
<goabx-input
(onChange)="onAddressLine2Change($event)"
[value]="addressLine2"
name="address-line-2"
ariaLabel="Address line 2"
width="100%">
</goabx-input>
</goabx-form-item>
<goabx-form-item label="Town or city" mt="l">
<goabx-input
(onChange)="onTownCityChange($event)"
[value]="townCity"
name="town-city"
ariaLabel="Town or city name"
width="460px">
</goabx-input>
</goabx-form-item>
<goabx-form-item label="Province or territory" mt="l" id="provinceLabel">
<goabx-dropdown
(onChange)="onProvinceChange($event)"
[value]="province"
name="province-territory"
ariaLabelledBy="provinceLabel">
<goabx-dropdown-item value="AB" label="Alberta"></goabx-dropdown-item>
<goabx-dropdown-item value="BC" label="British Columbia"></goabx-dropdown-item>
<goabx-dropdown-item value="MB" label="Manitoba"></goabx-dropdown-item>
<goabx-dropdown-item value="NB" label="New Brunswick"></goabx-dropdown-item>
<goabx-dropdown-item value="NL" label="Newfoundland and Labrador"></goabx-dropdown-item>
<goabx-dropdown-item value="NS" label="Nova Scotia"></goabx-dropdown-item>
<goabx-dropdown-item value="ON" label="Ontario"></goabx-dropdown-item>
<goabx-dropdown-item value="PE" label="Prince Edward Island"></goabx-dropdown-item>
<goabx-dropdown-item value="QC" label="Quebec"></goabx-dropdown-item>
<goabx-dropdown-item value="SK" label="Saskatchewan"></goabx-dropdown-item>
<goabx-dropdown-item value="NT" label="Northwest Territories"></goabx-dropdown-item>
<goabx-dropdown-item value="NU" label="Nunavut"></goabx-dropdown-item>
<goabx-dropdown-item value="YT" label="Yukon"></goabx-dropdown-item>
</goabx-dropdown>
</goabx-form-item>
<goabx-form-item label="Postal code" mt="l">
<goabx-input
(onChange)="onPostalCodeChange($event)"
[value]="postalCode"
name="postal-code"
width="105px">
</goabx-input>
</goabx-form-item>
<goabx-button type="submit" mt="2xl" (onClick)="onSubmit()">
Save and continue
</goabx-button>document.getElementById("address-line-1").addEventListener("_change", (e) => {
console.log("Address line 1:", e.detail.value);
});
document.getElementById("province-territory").addEventListener("_change", (e) => {
console.log("Province:", e.detail.value);
});
document.getElementById("submit-btn").addEventListener("_click", () => {
console.log("Form submitted");
});<goa-link leadingicon="arrow-back" size="small" mb="none">
Back
</goa-link>
<goa-text as="h2" mt="xl" mb="m">Your address</goa-text>
<goa-text mt="none" mb="xl">This is the home address of the person applying</goa-text>
<goa-form-item version="2" label="Address line 1">
<goa-input version="2"
id="address-line-1"
name="address-line-1"
aria-label="Address line 1"
width="100%">
</goa-input>
</goa-form-item>
<goa-form-item version="2" label="Address line 2" mt="l">
<goa-input version="2"
id="address-line-2"
name="address-line-2"
aria-label="Address line 2"
width="100%">
</goa-input>
</goa-form-item>
<goa-form-item version="2" label="Town or city" mt="l">
<goa-input version="2"
id="town-city"
name="town-city"
aria-label="Town or city name"
width="460px">
</goa-input>
</goa-form-item>
<goa-form-item version="2" label="Province or territory" mt="l" id="provinceLabel">
<goa-dropdown version="2"
id="province-territory"
name="province-territory"
aria-labelledby="provinceLabel">
<goa-dropdown-item value="AB" label="Alberta"></goa-dropdown-item>
<goa-dropdown-item value="BC" label="British Columbia"></goa-dropdown-item>
<goa-dropdown-item value="MB" label="Manitoba"></goa-dropdown-item>
<goa-dropdown-item value="NB" label="New Brunswick"></goa-dropdown-item>
<goa-dropdown-item value="NL" label="Newfoundland and Labrador"></goa-dropdown-item>
<goa-dropdown-item value="NS" label="Nova Scotia"></goa-dropdown-item>
<goa-dropdown-item value="ON" label="Ontario"></goa-dropdown-item>
<goa-dropdown-item value="PE" label="Prince Edward Island"></goa-dropdown-item>
<goa-dropdown-item value="QC" label="Quebec"></goa-dropdown-item>
<goa-dropdown-item value="SK" label="Saskatchewan"></goa-dropdown-item>
<goa-dropdown-item value="NT" label="Northwest Territories"></goa-dropdown-item>
<goa-dropdown-item value="NU" label="Nunavut"></goa-dropdown-item>
<goa-dropdown-item value="YT" label="Yukon"></goa-dropdown-item>
</goa-dropdown>
</goa-form-item>
<goa-form-item version="2" label="Postal code" mt="l">
<goa-input version="2"
id="postal-code"
name="postal-code"
width="105px">
</goa-input>
</goa-form-item>
<goa-button version="2" type="submit" mt="2xl" id="submit-btn">
Save and continue
</goa-button>Include a link in the helper text of an option
<GoabxFormItem label="How would you like to be contacted?">
<GoabCheckboxList name="contact-options">
<GoabxCheckbox
name="email"
text="Email"
value="email"
description={
<span>
Help text with a <a href="#">link</a>.
</span>
}
/>
<GoabxCheckbox name="phone" text="Phone" value="phone" />
<GoabxCheckbox name="text" text="Text message" value="text" />
</GoabCheckboxList>
</GoabxFormItem>optionOne = true;
optionTwo = false;
optionThree = false;<goabx-form-item label="How would you like to be contacted?">
<goab-checkbox-list name="contact-options">
<goabx-checkbox
name="email"
text="Email"
value="email"
[description]="descriptionTemplate">
<ng-template #descriptionTemplate>
<span>Help text with a <a href="#">link</a>.</span>
</ng-template>
</goabx-checkbox>
<goabx-checkbox name="phone" text="Phone" value="phone"></goabx-checkbox>
<goabx-checkbox name="text" text="Text message" value="text"></goabx-checkbox>
</goab-checkbox-list>
</goabx-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");<GoabxFormItem label="How do you want to sign in?">
<GoabxRadioGroup
name="selectOne"
value={selected}
onChange={(event) => setSelected(event.value)}
>
<GoabxRadioItem
value="1"
label="Sign in as a business"
description="Use the account associated with the business"
/>
<GoabxRadioItem
value="2"
label="Sign in as an individual"
description="If you don't have a Alberta.ca login, you can create one"
/>
</GoabxRadioGroup>
</GoabxFormItem>form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
selectOne: ["1"],
});
}<goabx-form-item label="How do you want to sign in?" [formGroup]="form">
<goabx-radio-group name="selectOne" formControlName="selectOne">
<goabx-radio-item
value="1"
label="Sign in as a business"
[description]="optionOneDescription">
<ng-template #optionOneDescription>
Use the account associated with the business
</ng-template>
</goabx-radio-item>
<goabx-radio-item
value="2"
label="Sign in as an individual"
[description]="optionTwoDescription">
<ng-template #optionTwoDescription>
If you don't have a Alberta.ca login, you can create one
</ng-template>
</goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>document.querySelector("goa-radio-group").addEventListener("_change", (e) => {
console.log("Selected:", e.detail.value);
});<goa-form-item version="2" label="How do you want to sign in?">
<goa-radio-group version="2" name="selectOne" value="1">
<goa-radio-item value="1" label="Sign in as a business">
<span slot="description">Use the account associated with the business</span>
</goa-radio-item>
<goa-radio-item value="2" label="Sign in as an individual">
<span slot="description">If you don't have a Alberta.ca login, you can create one</span>
</goa-radio-item>
</goa-radio-group>
</goa-form-item>Question page
const [answer, setAnswer] = useState("");
const handleContinue = () => {
console.log("Answer submitted:", answer);
};<GoabxLink leadingIcon="arrow-back" size="small" mb="none">
Back
</GoabxLink>
<GoabText as="h1" mt="xl" mb="m">What is your email address?</GoabText>
<GoabText mt="none" mb="xl">We'll use this to send you confirmation of your application.</GoabText>
<GoabxFormItem label="Email address">
<GoabxInput
name="email"
type="email"
value={answer}
onChange={(e) => setAnswer(e.value)}
width="100%"
/>
</GoabxFormItem>
<GoabButtonGroup alignment="start" mt="2xl">
<GoabxButton type="primary" onClick={handleContinue}>
Continue
</GoabxButton>
</GoabButtonGroup>
);
}answer = "";
onAnswerChange(event: { value: string }): void {
this.answer = event.value;
}
handleContinue(): void {
console.log("Answer submitted:", this.answer);
}<goabx-link leadingIcon="arrow-back" size="small" mb="none">
Back
</goabx-link>
<goab-text as="h1" mt="xl" mb="m">What is your email address?</goab-text>
<goab-text mt="none" mb="xl">We'll use this to send you confirmation of your application.</goab-text>
<goabx-form-item label="Email address">
<goabx-input
name="email"
type="email"
[value]="answer"
(onChange)="onAnswerChange($event)"
width="100%">
</goabx-input>
</goabx-form-item>
<goab-button-group alignment="start" mt="2xl">
<goabx-button type="primary" (onClick)="handleContinue()">
Continue
</goabx-button>
</goab-button-group>const emailInput = document.getElementById("email-input");
const continueBtn = document.getElementById("continue-btn");
let answer = "";
emailInput.addEventListener("_change", (e) => {
answer = e.detail.value;
});
continueBtn.addEventListener("_click", () => {
console.log("Answer submitted:", answer);
});<goa-link leadingicon="arrow-back" size="small" mb="none">
Back
</goa-link>
<goa-text as="h1" mt="xl" mb="m">What is your email address?</goa-text>
<goa-text mt="none" mb="xl">We'll use this to send you confirmation of your application.</goa-text>
<goa-form-item version="2" label="Email address">
<goa-input version="2"
id="email-input"
name="email"
type="email"
width="100%">
</goa-input>
</goa-form-item>
<goa-button-group alignment="start" mt="2xl">
<goa-button version="2" id="continue-btn" type="primary">
Continue
</goa-button>
</goa-button-group>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);
}<GoabxFormItem label="Date Picker">
<GoabxDatePicker
name="item"
value={date}
onChange={(e) => setNewDate(e.value as Date)}
mb="xl"
/>
</GoabxFormItem>
<GoabButtonGroup mt="xs" alignment="start">
<GoabxButton onClick={setValue}>
Set Value
</GoabxButton>
<GoabxButton onClick={clearValue}>Clear Value</GoabxButton>
</GoabButtonGroup>item: Date | undefined = undefined;
onChange(event: { value: Date | undefined }): void {
this.item = event.value;
}
setValue(): void {
const d = new Date();
d.setDate(d.getDate() - 7);
this.item = d;
}
clearValue(): void {
this.item = undefined;
}<goabx-form-item label="Date Picker">
<goabx-date-picker
(onChange)="onChange($event)"
name="item"
[value]="item">
</goabx-date-picker>
</goabx-form-item>
<goab-button-group alignment="start" mt="xs">
<goabx-button (onClick)="setValue()">Set Value</goabx-button>
<goabx-button (onClick)="clearValue()">Clear Value</goabx-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[]>([]);<GoabxFormItem
label="How would you like to be contacted?"
helpText="Select one option"
>
<GoabxRadioGroup
name="contactMethod"
value={contactMethod}
onChange={(e) => setContactMethod(e.value)}
>
<GoabxRadioItem
value="email"
label="Email"
reveal={
<GoabxFormItem label="Email address">
<GoabxInput name="email" onChange={() => {}} value="" />
</GoabxFormItem>
}
/>
<GoabxRadioItem
value="phone"
label="Phone"
reveal={
<GoabxFormItem label="Phone number">
<GoabxInput name="phoneNumber" onChange={() => {}} value="" />
</GoabxFormItem>
}
/>
<GoabxRadioItem
value="text"
label="Text message"
reveal={
<GoabxFormItem label="Mobile phone number">
<GoabxInput name="mobilePhoneNumber" onChange={() => {}} value="" />
</GoabxFormItem>
}
/>
</GoabxRadioGroup>
</GoabxFormItem>
<GoabxFormItem label="How would you like to be contacted?" mt="xl">
<GoabCheckboxList
name="contactMethods"
value={checkboxSelection}
onChange={(e) => setCheckboxSelection(e.values || [])}
>
<GoabxCheckbox
name="email"
text="Email"
value="email"
reveal={
<GoabxFormItem label="Email address">
<GoabxInput name="email" onChange={() => {}} value="" />
</GoabxFormItem>
}
/>
<GoabxCheckbox
name="phone"
text="Phone"
value="phone"
reveal={
<GoabxFormItem label="Phone number">
<GoabxInput name="phoneNumber" onChange={() => {}} value="" />
</GoabxFormItem>
}
/>
<GoabxCheckbox
name="text"
text="Text message"
value="text"
reveal={
<GoabxFormItem label="Mobile phone number">
<GoabxInput name="mobilePhoneNumber" onChange={() => {}} value="" />
</GoabxFormItem>
}
/>
</GoabCheckboxList>
</GoabxFormItem>form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
contactMethod: [""],
phoneNumber: [""],
emailAddress: [""],
emailContactMethod: [false],
phoneContactMethod: [false],
textContactMethod: [false],
});
}<goabx-form-item [formGroup]="form" label="How would you like to be contacted?" helpText="Select one option">
<goabx-radio-group name="contactMethod" formControlName="contactMethod">
<goabx-radio-item label="Email" value="email" [reveal]="emailReveal">
<ng-template #emailReveal>
<goabx-form-item label="Email address">
<goabx-input name="email" formControlName="emailAddress"></goabx-input>
</goabx-form-item>
</ng-template>
</goabx-radio-item>
<goabx-radio-item value="phone" label="Phone" [reveal]="phoneReveal">
<ng-template #phoneReveal>
<goabx-form-item label="Phone number">
<goabx-input name="phone" formControlName="phoneNumber"></goabx-input>
</goabx-form-item>
</ng-template>
</goabx-radio-item>
<goabx-radio-item value="text" label="Text message" [reveal]="textReveal">
<ng-template #textReveal>
<goabx-form-item label="Mobile phone number">
<goabx-input name="mobile" formControlName="phoneNumber"></goabx-input>
</goabx-form-item>
</ng-template>
</goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>
<goabx-form-item [formGroup]="form" label="How would you like to be contacted?" mt="xl">
<goab-checkbox-list name="contactMethods" formControlName="contactMethods">
<goabx-checkbox name="email" text="Email" value="email" [reveal]="checkEmailReveal">
<ng-template #checkEmailReveal>
<goabx-form-item label="Email address">
<goabx-input name="email" formControlName="emailAddress"></goabx-input>
</goabx-form-item>
</ng-template>
</goabx-checkbox>
<goabx-checkbox name="phone" text="Phone" value="phone" [reveal]="checkPhoneReveal">
<ng-template #checkPhoneReveal>
<goabx-form-item label="Phone number">
<goabx-input name="phone" formControlName="phoneNumber"></goabx-input>
</goabx-form-item>
</ng-template>
</goabx-checkbox>
<goabx-checkbox name="text" text="Text message" value="text" [reveal]="checkTextReveal">
<ng-template #checkTextReveal>
<goabx-form-item label="Mobile phone number">
<goabx-input name="mobile" formControlName="phoneNumber"></goabx-input>
</goabx-form-item>
</ng-template>
</goabx-checkbox>
</goab-checkbox-list>
</goabx-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 h3.review-h3 {
margin-bottom: var(--goa-space-m);
}
label.review-label {
font: var(--goa-typography-body-s);
color: var(--goa-color-text-secondary);
}
.review-content {
font: var(--goa-typography-body-m);
}
p.review-content {
margin-bottom: 0;
}
h5.review-h5 {
font: var(--goa-typography-body-m);
color: var(--goa-color-text-secondary);
margin-top: var(--goa-space-m);
margin-bottom: var(--goa-space-m);
}
h6.review-h6 {
font: var(--goa-typography-heading-s);
margin-top: 0;
margin-bottom: 0;
}
`,
],
})
export class ReviewAndActionComponent {
form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
case: ["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>
<goabx-form-item label="Case history and new request" mt="l">
<goabx-radio-group name="case" orientation="horizontal" formControlName="case">
<goabx-radio-item value="grant" label="Grant"></goabx-radio-item>
<goabx-radio-item value="deny" label="Deny"></goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>
<goabx-form-item label="Reason to deny" mt="l">
<goabx-dropdown name="reason" width="100%" formControlName="reason">
<goabx-dropdown-item value="1" label="Incomplete Application"></goabx-dropdown-item>
<goabx-dropdown-item value="2" label="Eligibility Criteria Not Met"></goabx-dropdown-item>
<goabx-dropdown-item value="3" label="Documentation Verification Failure"></goabx-dropdown-item>
</goabx-dropdown>
</goabx-form-item>
<goabx-form-item label="Message" mt="l">
<goabx-textarea name="message" [rows]="5" width="100%" formControlName="message"></goabx-textarea>
</goabx-form-item>
<goabx-button mt="xl" (onClick)="onClick()">Confirm adjournment</goabx-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>Search
const [search, setSearch] = useState("");
const onClick = () => {
console.log("search:", search);
};<form>
<GoabxFormItem>
<GoabBlock gap="xs" direction="row">
<GoabxInput
type="search"
name="search"
value={search}
onChange={(e) => setSearch(e.value)}
leadingIcon="search"
/>
<GoabxButton type="primary" onClick={onClick}>
Search
</GoabxButton>
</GoabBlock>
</GoabxFormItem>
</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">
<goabx-form-item>
<goab-block gap="xs" direction="row">
<goabx-input
type="search"
name="search"
formControlName="search"
leadingIcon="search">
</goabx-input>
<goabx-button type="primary" (onClick)="onClick()">Search</goabx-button>
</goab-block>
</goabx-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>Select one or more from a list of options
const [selectedOptions, setSelectedOptions] = useState<string[]>([]);<GoabxFormItem
label="How would you like to be contacted?"
helpText="Choose all that apply"
>
<GoabCheckboxList
name="contactPreferences"
value={selectedOptions}
onChange={(e) => setSelectedOptions(e.detail.value)}
>
<GoabxCheckbox name="email" text="Email" value="email" />
<GoabxCheckbox name="phone" text="Phone" value="phone" />
<GoabxCheckbox name="text" text="Text message" value="text" />
</GoabCheckboxList>
</GoabxFormItem>selectedOptions: string[] = [];
onSelectionChange(event: { detail: { value: string[] } }): void {
this.selectedOptions = event.detail.value;
}<goabx-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)">
<goabx-checkbox name="email" text="Email" value="email"></goabx-checkbox>
<goabx-checkbox name="phone" text="Phone" value="phone"></goabx-checkbox>
<goabx-checkbox name="text" text="Text message" value="text"></goabx-checkbox>
</goab-checkbox-list>
</goabx-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>Set a max width on a long radio item
const [selectOne, setSelectOne] = useState<string>("1");<form>
<GoabxFormItem label="Select one option">
<GoabxRadioGroup
name="selectOne"
value={selectOne}
onChange={(e: GoabRadioGroupOnChangeDetail) => setSelectOne(e.value)}>
<GoabxRadioItem
value="1"
label="Option one which has a very long label with lots of text"
maxWidth="300px"
/>
<GoabxRadioItem value="2" label="Option two" />
<GoabxRadioItem value="3" label="Option three" />
</GoabxRadioGroup>
</GoabxFormItem>
</form>selectOne = "1";
onRadioChange(event: GoabRadioGroupOnChangeDetail): void {
this.selectOne = event.value;
}<form>
<goabx-form-item label="Select one option">
<goabx-radio-group
name="selectOne"
[value]="selectOne"
(onChange)="onRadioChange($event)">
<goabx-radio-item
value="1"
label="Option one which has a very long label with lots of text"
maxWidth="300px">
</goabx-radio-item>
<goabx-radio-item value="2" label="Option two"></goabx-radio-item>
<goabx-radio-item value="3" label="Option three"></goabx-radio-item>
</goabx-radio-group>
</goabx-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>Show a list to help answer a question
const handleChange = (event: GoabRadioGroupOnChangeDetail) => {
console.log("value is", event.value);
};<form>
<GoabxFormItem
label="Do you have additional education expenses?"
helpText="You can request funding for these now or at any time during your program."
mb="m">
<GoabxRadioGroup name="additional" onChange={handleChange}>
<GoabxRadioItem label="Yes" value="yes" name="additional" />
<GoabxRadioItem label="No" value="no" name="additional" />
</GoabxRadioGroup>
</GoabxFormItem>
<GoabDetails heading="What are additional education expenses?">
<GoabBlock gap="m" mt="m">
<div>
<strong>Examples of education expenses</strong>
<ul className="goa-unordered-list">
<li>Laptop and computer hardware</li>
<li>Computer apps and subscriptions</li>
<li>Home internet</li>
<li>Testing and exam fees</li>
<li>Work or school clothing, like work boots</li>
</ul>
</div>
<div>
<strong>Do not include</strong>
<ul className="goa-unordered-list">
<li>Tuition</li>
<li>Mandatory fees</li>
<li>Books and supplies</li>
<li>School association fees</li>
</ul>
</div>
</GoabBlock>
</GoabDetails>
</form>form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
additional: [""]
});
}
onRadioChange(event: Event): void {
const detail = (event as CustomEvent).detail;
console.log("value is", detail.value);
}<form [formGroup]="form">
<goabx-form-item
label="Do you have additional education expenses?"
helpText="You can request funding for these now or at any time during your program."
mb="m">
<goabx-radio-group name="additional" (onChange)="onRadioChange($event)">
<goabx-radio-item label="Yes" value="yes" name="additional"></goabx-radio-item>
<goabx-radio-item label="No" value="no" name="additional"></goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>
<goab-details heading="What are additional education expenses?">
<goab-block gap="m" mt="m">
<div>
<strong>Examples of education expenses</strong>
<ul class="goa-unordered-list">
<li>Laptop and computer hardware</li>
<li>Computer apps and subscriptions</li>
<li>Home internet</li>
<li>Testing and exam fees</li>
<li>Work or school clothing, like work boots</li>
</ul>
</div>
<div>
<strong>Do not include</strong>
<ul class="goa-unordered-list">
<li>Tuition</li>
<li>Mandatory fees</li>
<li>Books and supplies</li>
<li>School association fees</li>
</ul>
</div>
</goab-block>
</goab-details>
</form>document.querySelector('goa-radio-group').addEventListener('_change', (e) => {
console.log('value is', e.detail.value);
});<form>
<goa-form-item version="2"
label="Do you have additional education expenses?"
helptext="You can request funding for these now or at any time during your program."
mb="m">
<goa-radio-group version="2" name="additional">
<goa-radio-item label="Yes" value="yes" name="additional"></goa-radio-item>
<goa-radio-item label="No" value="no" name="additional"></goa-radio-item>
</goa-radio-group>
</goa-form-item>
<goa-details heading="What are additional education expenses?">
<goa-block gap="m" mt="m">
<div>
<strong>Examples of education expenses</strong>
<ul class="goa-unordered-list">
<li>Laptop and computer hardware</li>
<li>Computer apps and subscriptions</li>
<li>Home internet</li>
<li>Testing and exam fees</li>
<li>Work or school clothing, like work boots</li>
</ul>
</div>
<div>
<strong>Do not include</strong>
<ul class="goa-unordered-list">
<li>Tuition</li>
<li>Mandatory fees</li>
<li>Books and supplies</li>
<li>School association fees</li>
</ul>
</div>
</goa-block>
</goa-details>
</form>Show a section title on a question page
<GoabxLink leadingIcon="arrow-back" size="small" mb="none">
Back
</GoabxLink>
<GoabText as="h3" size="body-m" mt="xl" mb="m" color="secondary">Personal information</GoabText>
<GoabxFormItem label="Do you currently live in Canada?" labelSize="large">
<GoabxRadioGroup
name="canada"
ariaLabel="Do you currently live in Canada?"
onChange={() => {}}>
<GoabxRadioItem value="yes" label="Yes" />
<GoabxRadioItem value="no" label="No" />
</GoabxRadioGroup>
</GoabxFormItem>
<GoabxButton type="submit" mt="2xl">
Save and continue
</GoabxButton>a.back-link::before {
content: "";
display: inline-block;
width: 42px;
height: 24px;
vertical-align: middle;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}
a.back-link:visited::before,
a.back-link:hover::before {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}
a.back-link {
margin-top: var(--goa-space-m);
}
h3.section-title {
margin-bottom: 0;
color: var(--goa-color-text-secondary);
}
a.back-link + h3 {
margin-top: var(--goa-space-2xl);
}onRadioChange(event: Event): void {
const detail = (event as CustomEvent).detail;
console.log("Selected:", detail.value);
}<goabx-link leadingIcon="arrow-back" size="small" mb="none">
Back
</goabx-link>
<goab-text as="h3" size="body-m" mt="xl" mb="m" color="secondary">Personal information</goab-text>
<goabx-form-item label="Do you currently live in Canada?" labelSize="large">
<goabx-radio-group
name="canada"
ariaLabel="Do you currently live in Canada?"
(onChange)="onRadioChange($event)">
<goabx-radio-item value="yes" label="Yes"></goabx-radio-item>
<goabx-radio-item value="no" label="No"></goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>
<goabx-button type="submit" mt="2xl">
Save and continue
</goabx-button>document.querySelector('goa-radio-group').addEventListener('_change', (e) => {
console.log('Selected:', e.detail.value);
});<goa-link leadingicon="arrow-back" size="small" mb="none">
Back
</goa-link>
<goa-text as="h3" size="body-m" mt="xl" mb="m" color="secondary">Personal information</goa-text>
<goa-form-item version="2" label="Do you currently live in Canada?" labelsize="large">
<goa-radio-group version="2" name="canada" aria-label="Do you currently live in Canada?">
<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-button version="2" type="submit" mt="2xl">
Save and continue
</goa-button>Show a simple progress indicator on a question page
<GoabxLink leadingIcon="arrow-back" size="small" mb="none">
Back
</GoabxLink>
<GoabText as="h3" size="body-m" mt="xl" mb="m" color="secondary">Question 3 of 9</GoabText>
<GoabxFormItem label="Do you currently live in Canada?" labelSize="large">
<GoabxRadioGroup
name="canada"
ariaLabel="Do you currently live in Canada?"
onChange={() => {}}>
<GoabxRadioItem value="yes" label="Yes" />
<GoabxRadioItem value="no" label="No" />
</GoabxRadioGroup>
</GoabxFormItem>
<GoabxButton type="submit" mt="2xl">
Save and continue
</GoabxButton>h3.section-title {
margin-bottom: 0;
color: var(--goa-color-text-secondary);
}
a.back-link::before {
content: "";
display: inline-block;
width: 42px;
height: 24px;
vertical-align: middle;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}
a.back-link:visited::before,
a.back-link:hover::before {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}
a.back-link {
margin-top: var(--goa-space-m);
}
a.back-link + h3 {
margin-top: var(--goa-space-2xl);
}onRadioChange(event: Event): void {
const detail = (event as CustomEvent).detail;
console.log("Selected:", detail.value);
}<goabx-link leadingIcon="arrow-back" size="small" mb="none">
Back
</goabx-link>
<goab-text as="h3" size="body-m" mt="xl" mb="m" color="secondary">Question 3 of 9</goab-text>
<goabx-form-item label="Do you currently live in Canada?" labelSize="large">
<goabx-radio-group
name="canada"
ariaLabel="Do you currently live in Canada?"
(onChange)="onRadioChange($event)">
<goabx-radio-item value="yes" label="Yes"></goabx-radio-item>
<goabx-radio-item value="no" label="No"></goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>
<goabx-button type="submit" mt="2xl">
Save and continue
</goabx-button>document.querySelector('goa-radio-group').addEventListener('_change', (e) => {
console.log('Selected:', e.detail.value);
});<goa-link leadingicon="arrow-back" size="small" mb="none">
Back
</goa-link>
<goa-text as="h3" size="body-m" mt="xl" mb="m" color="secondary">Question 3 of 9</goa-text>
<goa-form-item version="2" label="Do you currently live in Canada?" labelsize="large">
<goa-radio-group version="2" name="canada" aria-label="Do you currently live in Canada?">
<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-button version="2" type="submit" mt="2xl">
Save and continue
</goa-button>Show a simple progress indicator on a question page with multiple questions
<GoabxLink leadingIcon="arrow-back" size="small" mb="none">
Back
</GoabxLink>
<GoabText as="h3" size="body-m" mt="xl" mb="none" color="secondary">Step 1 of 5</GoabText>
<GoabText as="h2" mt="xs" mb="xl">Personal information</GoabText>
<GoabxFormItem label="What is your name?">
<GoabxInput onChange={() => {}} name="name" ariaLabel="what is your name?" width="50ch" />
</GoabxFormItem>
<GoabxFormItem label="What is your phone number?" mt="l">
<GoabxInput
onChange={() => {}}
name="phone-number"
ariaLabel="what is your phone number?"
leadingContent="+1"
/>
</GoabxFormItem>
<GoabxFormItem label="What is your home postal code?" mt="l">
<GoabxInput
onChange={() => {}}
name="postal-code"
width="14ch"
ariaLabel="what is your home postal code"
/>
</GoabxFormItem>
<GoabxButton type="submit" mt="2xl">
Save and continue
</GoabxButton>a.back-link::before {
content: "";
display: inline-block;
width: 42px;
height: 24px;
vertical-align: middle;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%230070C4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}
a.back-link:visited::before,
a.back-link:hover::before {
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 2 22 22" fill="none" stroke="%23004f84" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>') center center no-repeat;
}
a.back-link {
margin-top: var(--goa-space-m);
}
h3.section-title {
margin-bottom: 0;
color: var(--goa-color-text-secondary);
}
a.back-link + h3 {
margin-top: var(--goa-space-2xl);
}
h3.section-title + h2 {
margin-top: var(--goa-space-xs);
}onChange(event: Event): void {
const detail = (event as CustomEvent).detail;
console.log("Value:", detail.value);
}<goabx-link leadingIcon="arrow-back" size="small" mb="none">
Back
</goabx-link>
<goab-text as="h3" size="body-m" mt="xl" mb="none" color="secondary">Step 1 of 5</goab-text>
<goab-text as="h2" mt="xs" mb="xl">Personal information</goab-text>
<goabx-form-item label="What is your name?">
<goabx-input (onChange)="onChange($event)" name="name" ariaLabel="what is your name?" width="50ch"></goabx-input>
</goabx-form-item>
<goabx-form-item label="What is your phone number?" mt="l">
<goabx-input (onChange)="onChange($event)" name="phone-number" ariaLabel="what is your phone number?">
<div slot="leadingContent">+1</div>
</goabx-input>
</goabx-form-item>
<goabx-form-item label="What is your home postal code?" mt="l">
<goabx-input (onChange)="onChange($event)" name="postal-code" width="14ch" ariaLabel="what is your home postal code"></goabx-input>
</goabx-form-item>
<goabx-button type="submit" mt="2xl">
Save and continue
</goabx-button>document.querySelectorAll('goa-input').forEach(input => {
input.addEventListener('_change', (e) => {
console.log(`${e.target.name}:`, e.detail.value);
});
});<goa-link leadingicon="arrow-back" size="small" mb="none">
Back
</goa-link>
<goa-text as="h3" size="body-m" mt="xl" mb="none" color="secondary">Step 1 of 5</goa-text>
<goa-text as="h2" mt="xs" mb="xl">Personal information</goa-text>
<goa-form-item version="2" label="What is your name?">
<goa-input version="2" name="name" aria-label="what is your name?" width="50ch"></goa-input>
</goa-form-item>
<goa-form-item version="2" label="What is your phone number?" mt="l">
<goa-input version="2" name="phone-number" aria-label="what is your phone number?">
<div slot="leadingContent">+1</div>
</goa-input>
</goa-form-item>
<goa-form-item version="2" label="What is your home postal code?" mt="l">
<goa-input version="2" name="postal-code" width="14ch" aria-label="what is your home postal code"></goa-input>
</goa-form-item>
<goa-button version="2" type="submit" mt="2xl">
Save and continue
</goa-button>Show more information to help answer a question
<GoabxLink leadingIcon="arrow-back" size="small" mb="none">
Back
</GoabxLink>
<GoabxFormItem
mt="xl"
label="Do you pay for child care?"
labelSize="large"
helpText="Examples of child care are daycares, day homes and baby-sisters."
>
<GoabxRadioGroup
name="child-care"
ariaLabel="Do you pay for child care?"
onChange={() => {}}
>
<GoabxRadioItem value="yes" label="Yes" />
<GoabxRadioItem value="no" label="No" />
</GoabxRadioGroup>
</GoabxFormItem>
<GoabDetails heading="Why are we asking this question?" mt="l">
<p>We ask this question to determine if you are eligible for child care benefits.</p>
</GoabDetails>
<GoabxButton type="submit" mt="2xl">
Save and continue
</GoabxButton>onRadioChange(event: Event): void {
console.log("Radio changed:", event);
}<goabx-link leadingIcon="arrow-back" size="small" mb="none">
Back
</goabx-link>
<goabx-form-item
mt="xl"
label="Do you pay for child care?"
labelSize="large"
helpText="Examples of child care are daycares, day homes and baby-sisters.">
<goabx-radio-group
name="child-care"
ariaLabel="Do you pay for child care?"
(onChange)="onRadioChange($event)">
<goabx-radio-item value="yes" label="Yes"></goabx-radio-item>
<goabx-radio-item value="no" label="No"></goabx-radio-item>
</goabx-radio-group>
</goabx-form-item>
<goab-details heading="Why are we asking this question?" mt="l">
<p>We ask this question to determine if you are eligible for child care benefits.</p>
</goab-details>
<goabx-button type="submit" mt="2xl">Save and continue</goabx-button><goa-link leadingicon="arrow-back" size="small" mb="none">
Back
</goa-link>
<goa-form-item version="2"
mt="xl"
label="Do you pay for child care?"
labelsize="large"
helptext="Examples of child care are daycares, day homes and baby-sisters.">
<goa-radio-group version="2"
name="child-care"
arialabel="Do you pay for child care?">
<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-details heading="Why are we asking this question?" mt="l">
<p>We ask this question to determine if you are eligible for child care benefits.</p>
</goa-details>
<goa-button version="2" type="submit" mt="2xl">Save and continue</goa-button>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>.
</>
);<GoabxFormItem label="First name" error={errorMessage}>
<GoabxInput onChange={onChange} value={value} name="item" error={true} />
</GoabxFormItem>form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
item: [""],
});
}<goabx-form-item label="First name" [formGroup]="form">
<goabx-input name="item" formControlName="item" [error]="true"></goabx-input>
<goabx-form-item-slot slot="error">
<span>This is </span>
<i>slotted </i>
<b>error text.</b>
</goabx-form-item-slot>
</goabx-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>.
</>
);<GoabxFormItem label="First name" helpText={helpText}>
<GoabxInput onChange={onChange} value={value} name="item" />
</GoabxFormItem>form: FormGroup;
constructor(private fb: FormBuilder) {
this.form = this.fb.group({
item: [""],
});
}<goabx-form-item label="First name" [formGroup]="form">
<goabx-input name="item" formControlName="item"></goabx-input>
<goabx-form-item-slot slot="helptext">
<span>This is </span>
<i>slotted </i>
<b>help text</b>.
</goabx-form-item-slot>
</goabx-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>Type to create a new filter
const [typedChips, setTypedChips] = useState<string[]>([]);
const [inputValue, setInputValue] = useState("");<GoabxFormItem label="Type to create a chip" mb="m">
<GoabxInput
name="chipInput"
value={inputValue}
onChange={(e) => setInputValue(e.value.trim())}
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%"
/>
</GoabxFormItem>
<div>
{typedChips.map((chip, index) => (
<GoabxFilterChip
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);
}<goabx-form-item label="Type to create a chip" mb="m">
<goabx-input
[value]="inputValue"
(onChange)="handleInputChange($event)"
(onKeyPress)="handleInputKeyPress($event)"
width="100%">
</goabx-input>
</goabx-form-item>
<div *ngIf="typedChips.length > 0">
<goabx-filter-chip
*ngFor="let typedChip of typedChips"
[content]="typedChip"
mb="xs"
mr="xs"
(onClick)="removeTypedChip(typedChip)">
</goabx-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.