Text area

A multi-line field where users can input and edit text.

Props

name
string
Name of the input value that is received in the change event.
ariaLabel
string
Defines how the text will be translated for the screen reader. If not specified it will fall back to the name.
autoComplete
string
Specifies the autocomplete attribute for the textarea input.
countBy
GoabTextAreaCountBy
Counting interval for characters or words, specifying whether to count every character or word.
disabled
boolean
Sets the input to a disabled state.
error
boolean
Sets the input to an error state.
id
string
Sets the id attribute on the textarea element.
maxCount
number
Maximum number of characters or words allowed.
maxWidth
string
Sets the maximum width of the text area.
Defaults to 60ch.
placeholder
string
Text displayed within the textarea when no value is set.
readOnly
boolean
Sets the input to a read only state.
rows
number
Sets the number of visible text rows.
Defaults to 3.
size
GoabTextAreaSize
Sets the visual size variant of the text area.
testId
string
Sets a data-testid attribute for automated testing.
value
string
Bound to the current value of the textarea.
width
string
Sets the width of the text area.
Defaults to 100%.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
ariaLabel
string
Defines how the text will be translated for the screen reader. If not specified it will fall back to the name.
autoComplete
string
Specifies the autocomplete attribute for the textarea input.
Defaults to on.
countBy
GoabTextAreaCountBy
Counting interval for characters or words, specifying whether to count every character or word.
disabled
boolean
Sets the disabled state for the control.
error
boolean
Sets the error state for the control.
id
string
Sets the id attribute of the underlying web component.
maxCount
number
Maximum number of characters or words allowed.
Defaults to -1.
maxWidth
string
Maximum width of the text area.
name
string
Name of the input value that is received in the _change event.
placeholder
string
Text displayed within the input when no value is set.
readOnly
boolean
Sets the input to a read only state.
rows
number
Set the number of rows.
Defaults to 3.
size
GoabTextAreaSize
Sets the size variant of the textarea.
Defaults to default.
testId
string
Sets the data-testid attribute for automated testing.
value
string
Sets the control value used by Angular forms and one-way binding.
width
string
Width of the text area.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.
name
string
Name of the input value that is received in the _change event.
arialabel
string
Defines how the text will be translated for the screen reader. If not specified it will fall back to the name.
autocomplete
string
Specifies the autocomplete attribute for the textarea input.
countby
"character" | "word" | ""
Counting interval for characters or words, specifying whether to count every character or word.
disabled
boolean true | false
Sets the input to a disabled state. Use [attr.disabled] with [formControl]
Defaults to false.
error
boolean true | false
Sets the input to an error state
Defaults to false.
maxcount
number
Maximum number of characters or words allowed
Defaults to -1.
maxwidth
string
Maximum width of the text area
Defaults to 60ch.
placeholder
string
Text displayed within the input when no value is set.
readonly
boolean true | false
Sets the input to a read only state.
Defaults to false.
rows
number
Set the number of rows.
Defaults to 3.
size
"default" | "compact"
Defaults to default.
testid
string
Sets a data-testid attribute for automated testing.
value
string
Bound to value
version
"1" | "2"
Design system version for styling.
Defaults to 1.
width
string
Width of the text area.
Defaults to 100%.
mt, mr, mb, ml
Spacing
Apply margin to the top, right, bottom, and/or left of the component.

Events

onBlur
(event: GoabTextAreaOnBlurDetail) => void
Callback fired when the textarea loses focus.
onChange
(event: GoabTextAreaOnChangeDetail) => void
Callback fired when the value of the textarea changes.
onKeyPress
(event: GoabTextAreaOnKeyPressDetail) => void
Callback fired when a key is pressed within the textarea.
onBlur
(event: GoabTextAreaOnBlurDetail) => void
Emits when the textarea loses focus. Emits the name and current value.
onChange
(event: GoabTextAreaOnChangeDetail) => void
Emits when the textarea value changes. Emits the name and new value.
onKeyPress
(event: GoabTextAreaOnKeyPressDetail) => void
Emits when a key is pressed in the textarea. Emits the name, value, and key.
_blur
CustomEvent<{ name: string; value: string }>
_change
CustomEvent<{ name: string; value: string }>
_keyPress
CustomEvent<{ name: string; value: string; key: string }>
Examples

Ask a long answer question with a maximum word count

const [value, setValue] = useState("");
<GoabFormItem
  label="Provide more detail"
  helpText="Maximum 500 words. Do not include personal or financial information."
>
  <GoabTextArea
    name="program"
    onChange={(e) => setValue(e.value)}
    value={value}
    width="100%"
    rows={6}
    maxCount={500}
    countBy="word"
  />
</GoabFormItem>
form!: FormGroup;

constructor(private fb: FormBuilder) {
  this.form = this.fb.group({
    program: [""],
  });
}
<goab-form-item
  label="Provide more detail"
  helpText="Maximum 500 words. Do not include personal or financial information."
>
  <goab-textarea
    name="program"
    [formControl]="form.controls.program"
    width="100%"
    [rows]="6"
    [maxCount]="500"
    countBy="word"
  >
  </goab-textarea>
</goab-form-item>
document.getElementById("program-textarea")?.addEventListener("_change", (e) => {
  console.log("Value:", e.detail.value);
});
<goa-form-item
  version="2"
  label="Provide more detail"
  helptext="Maximum 500 words. Do not include personal or financial information."
>
  <goa-textarea
    version="2"
    name="program"
    id="program-textarea"
    width="100%"
    rows="6"
    maxcount="500"
    countby="word"
  >
  </goa-textarea>
</goa-form-item>

Add another item in a modal

const [open, setOpen] = useState(false);
const [type, setType] = useState<string>();
const [name, setName] = useState<string>();
const [description, setDescription] = useState<string>();
<GoabButton type="tertiary" leadingIcon="add" onClick={() => setOpen(true)}>
  Add another item
</GoabButton>
<GoabModal
  heading="Add a new item"
  open={open}
  actions={
    <GoabButtonGroup alignment="end">
      <GoabButton type="tertiary" size="compact" onClick={() => setOpen(false)}>
        Cancel
      </GoabButton>
      <GoabButton type="primary" size="compact" onClick={() => setOpen(false)}>
        Save new item
      </GoabButton>
    </GoabButtonGroup>
  }
>
  <p>Fill in the information to create a new item</p>
  <GoabFormItem label="Type" mt="l">
    <GoabDropdown onChange={(e) => setType(e.value)} value={type}>
      <GoabDropdownItem value="1" label="Option 1" />
      <GoabDropdownItem value="2" label="Option 2" />
    </GoabDropdown>
  </GoabFormItem>
  <GoabFormItem label="Name" mt="l">
    <GoabInput
      onChange={(e) => setName(e.value)}
      value={name}
      name="name"
      width="100%"
    />
  </GoabFormItem>
  <GoabFormItem label="Description" mt="l">
    <GoabTextArea
      name="description"
      rows={3}
      width="100%"
      onChange={(e) => setDescription(e.value)}
      value={description}
    />
  </GoabFormItem>
</GoabModal>
open = false;
type: string | undefined = "";
name = "";
description = "";

toggleModal() {
  this.open = !this.open;
}

updateType(event: any) {
  this.type = event.value;
}

updateName(event: any) {
  this.name = event.value;
}

updateDescription(event: any) {
  this.description = event.value;
}
<goab-button type="tertiary" leadingIcon="add" (onClick)="toggleModal()"
  >Add another item</goab-button
>
<goab-modal
  [open]="open"
  (onClose)="toggleModal()"
  heading="Add a new item"
  [actions]="actions"
>
  <p>Fill in the information to create a new item</p>
  <goab-form-item label="Type" mt="l">
    <goab-dropdown (onChange)="updateType($event)" [value]="type">
      <goab-dropdown-item value="1" label="Option 1"></goab-dropdown-item>
      <goab-dropdown-item value="2" label="Option 2"></goab-dropdown-item>
    </goab-dropdown>
  </goab-form-item>
  <goab-form-item label="Name" mt="l">
    <goab-input
      name="name"
      width="100%"
      (onChange)="updateName($event)"
      [value]="name"
    ></goab-input>
  </goab-form-item>
  <goab-form-item label="Description" mt="l">
    <goab-textarea
      name="description"
      width="100%"
      [rows]="3"
      (onChange)="updateDescription($event)"
      [value]="description"
    ></goab-textarea>
  </goab-form-item>
  <ng-template #actions>
    <goab-button-group alignment="end">
      <goab-button type="tertiary" size="compact" (onClick)="toggleModal()"
        >Cancel</goab-button
      >
      <goab-button type="primary" size="compact" (onClick)="toggleModal()"
        >Save new item</goab-button
      >
    </goab-button-group>
  </ng-template>
</goab-modal>
const modal = document.getElementById("add-item-modal");
const openBtn = document.getElementById("open-modal-btn");
const cancelBtn = document.getElementById("cancel-btn");
const saveBtn = document.getElementById("save-btn");

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

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

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

saveBtn.addEventListener("_click", () => {
  modal.removeAttribute("open");
});
<goa-button version="2" id="open-modal-btn" type="tertiary" leadingicon="add"
  >Add another item</goa-button
>
<goa-modal version="2" id="add-item-modal" heading="Add a new item">
  <p>Fill in the information to create a new item</p>
  <goa-form-item version="2" label="Type" mt="l">
    <goa-dropdown version="2" id="type-dropdown">
      <goa-dropdown-item value="1" label="Option 1"></goa-dropdown-item>
      <goa-dropdown-item value="2" label="Option 2"></goa-dropdown-item>
    </goa-dropdown>
  </goa-form-item>
  <goa-form-item version="2" label="Name" mt="l">
    <goa-input version="2" name="name" width="100%" id="name-input"></goa-input>
  </goa-form-item>
  <goa-form-item version="2" label="Description" mt="l">
    <goa-textarea
      version="2"
      name="description"
      width="100%"
      rows="3"
      id="description-textarea"
    ></goa-textarea>
  </goa-form-item>
  <div slot="actions">
    <goa-button-group alignment="end">
      <goa-button version="2" id="cancel-btn" type="tertiary" size="compact"
        >Cancel</goa-button
      >
      <goa-button version="2" id="save-btn" type="primary" size="compact"
        >Save new item</goa-button
      >
    </goa-button-group>
  </div>
</goa-modal>

Give more information before asking a question (b)

const [textValue, setTextValue] = useState("");

const handleChange = (event: GoabTextAreaOnChangeDetail) => {
  setTextValue(event.value);
};

const handleContinue = () => {
  console.log("Submitted:", textValue);
};
<GoabLink leadingIcon="arrow-back" size="small" mb="none">
  Back
</GoabLink>

<GoabText tag="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>
  <GoabFormItem
    label="Provide details about your situation"
    helpText="Include specific details to help us answer your question quickly."
  >
    <GoabTextArea
      name="program"
      onChange={handleChange}
      value={textValue}
      maxCount={400}
      countBy="character"
    />
  </GoabFormItem>
</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">
  <GoabButton type="primary" onClick={handleContinue}>
    Continue
  </GoabButton>
</GoabButtonGroup>
form: FormGroup;

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

onContinue(): void {
  console.log("Submitted:", this.form.get("program")?.value);
}
<goab-link leadingIcon="arrow-back" size="small" mb="none"> Back </goab-link>

<goab-text tag="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">
  <goab-form-item
    label="Provide details about your situation"
    helpText="Include specific details to help us answer your question quickly."
  >
    <goab-textarea
      formControlName="program"
      name="program"
      [maxCount]="400"
      countBy="character"
    >
    </goab-textarea>
  </goab-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">
  <goab-button type="primary" (onClick)="onContinue()"> Continue </goab-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>

Review and action

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

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

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

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

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

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

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

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

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

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

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

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

onClick(): void {
  console.log("Confirm clicked!");
}
<goab-grid minChildWidth="315px">
  <goab-container accent="thin" type="non-interactive">
    <goab-text size="heading-m" mt="none" mb="m">Appearance details</goab-text>
    <goab-grid minChildWidth="200px" gap="m">
      <goab-block direction="column" gap="xs">
        <goab-text size="body-s" color="secondary" mt="none" mb="none"
          >Accused name</goab-text
        >
        <goab-text size="body-m" mt="none" mb="none">Doe, John Scott</goab-text>
      </goab-block>

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

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

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

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

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

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

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

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

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

      <goab-button mt="xl" (onClick)="onClick()">Confirm adjournment</goab-button>
    </form>
  </goab-container>
</goab-grid>
document.getElementById("confirm-btn").addEventListener("_click", () => {
  console.log("Confirm clicked!");
});
<goa-grid minchildwidth="315px">
  <goa-container accent="thin" type="non-interactive">
    <goa-text size="heading-m" mt="none" mb="m">Appearance details</goa-text>
    <goa-grid minchildwidth="200px" gap="m">
      <goa-block direction="column" gap="xs">
        <goa-text size="body-s" color="secondary" mt="none" mb="none"
          >Accused name</goa-text
        >
        <goa-text size="body-m" mt="none" mb="none">Doe, John Scott</goa-text>
      </goa-block>

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

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

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

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

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

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

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

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

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

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

States

Submit

When you must disable a button or input:

  • Provide nearby text explaining what needs to happen first
  • Consider showing the element enabled with validation on submit instead
  • Use aria-describedby to link the disabled element to explanatory text
Don't
Don't disable buttons or inputs without explaining why. Disabled controls can be confusing and users may not understand why they can't interact with an element.

Other

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

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

Sizing

Known input length: Use fixed-width inputs for content with a specific length, such as postal code (7 characters) or year (4 characters).

Unknown input length: If you don’t know how many characters the user will need (like their name), make your text input 100% of the container.

Do
Size text inputs based on the expected content length to help users understand what information is needed.

Content

Tip
Use countBy='word' when suggesting a response length. Use countBy='character' when enforcing a hard limit.

Types

Do
Use a text area to input content longer than a single line, such as descriptions, comments, or feedback.
All GoA Design System components are built to meet WCAG 2.2 AA standards. The following guidelines provide additional context for accessible implementation.

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

Related components

Form item

Wraps an input control with a text label, requirement label, helper text, and error text.
Input

A single-line field where users can input and edit text.
View old component docs