Text area

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

Related components: Form item, Input

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>

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.

Ask a question and give more information

Back

Description

List all components and include a description, including the number of hours for each.

Break down your outline into easily digestible sections. This can help to ensure that the document is well-organized and easy to navigate.

Continue

<GoAContainer>
  <GoAButton type="tertiary" leadingIcon="arrow-back" mb="m">
    Back
  </GoAButton>
  <h2>
    Description
  </h2>
  <p>
    List all components and include a description, including the number of hours for each.
  </p>
  <form>
    <GoAFormItem label="Program outline" helpText="Remember to maintain clarity, accuracy, and coherence throughout the program outline.">
      <GoATextarea name="program" value="Input text" onChange={onChange}></GoATextarea>
    </GoAFormItem>
  </form>
  <GoADetails heading="How to write a good outline">
    <p>
      Break down your outline into easily digestible sections. This can help to ensure that the document is well-organized and easy to navigate.
    </p>
  </GoADetails>
  <GoAButtonGroup alignment="start" mt="l">
    <GoAButton type="primary">
      Continue
    </GoAButton>
  </GoAButtonGroup>
</GoAContainer>

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

Text area

Component

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

Component

Properties

Examples

Ask a question and give more information

Description