Design system

Text area

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

const [value, setValue] = useState<string>("");

function onChange(name: string, value: string) {
  setValue(value);
}

<form>
  <GoAFormItem label="Basic">
    <GoATextArea name="item" value={value} onChange={onChange} width="60ch"></GoATextArea>
  </GoAFormItem>
</form>

Properties

name

string

Name of the input value that is received in the onChange event

value

string

Bound to value

placeholderstring

Text displayed within the input when no value is set.

rowsnumber

Set the number of rows
Defaults to 3.

widthstring

Width of the text area
Defaults to 60ch.

errorboolean

Sets the input to an error state
Defaults to false.

readOnlyboolean

Sets the input to a read only state.
Defaults to false.

disabledboolean

Sets the input to a disabled state. Use [attr.disabled] with [formControl]
Defaults to false.

ariaLabelstring

Defines how the text will be translated for the screen reader. If not specified it will fall back to the name.

onChange

(name: string, value: string[] | string | null) => void

Callback function when textarea value is changed

countBycharacter | word

Counting interval for characters or words, specifying whether to count every character or word.

maxCountnumber

Maximum number of characters or words allowed

onKeyPress(name: string, value: string | Date | number) => void

Function invoked when a key is pressed

mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

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

Back

Submit a question about your benefits

If you need clarification about your benefit eligibility, payment schedule, or application status, submit your question here.

Include your benefit program name, mention any recent correspondence you received and/or provide any relevant case or reference numbers.

Continue

<GoAButton type="tertiary" leadingIcon="arrow-back" mb="m">
  Back
</GoAButton>
<h2>
  Submit a question about your benefits
</h2>
<p>
  If you need clarification about your benefit eligibility, payment schedule, or application status, submit your question here.
</p>
<form>
  <GoAFormItem label="Provide details about your situation" helpText="Include specific details to help us answer your question quickly.">
    <GoATextArea name="program" onChange={onChange} maxCount={400} countBy="character"></GoATextArea>
  </GoAFormItem>
</form>
<GoADetails 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>
</GoADetails>
<GoAButtonGroup alignment="start" mt="l">
  <GoAButton type="primary">
    Continue
  </GoAButton>
</GoAButtonGroup>

<GoAFormItem label="Provide more detail" helpText="Do not include personal or financial information, like your National Insurance number or credit card details.">
  <GoATextArea name="program" onChange={onChange} width="100%" rows={6} maxCount={500} countBy="word"></GoATextArea>
</GoAFormItem>

Detailed design documentation for this component can be found on its component page in Figma.

Accessibility documentation for this component can be found on its component page in Figma.

More accessibility guidance for design and development is coming soon.

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours

Playground

Properties

Ask a question and give more information

Submit a question about your benefits

Ask a long answer question with a maximum word count