Text areas

Use a text area when you want the user to enter more than a single line of information.

  • Content:
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
    
    .ontario-textarea {
    	display: block;
    	width: globalVariables.$full-width;
    	min-height: 144px;
    	margin: spacing.$spacing-0 spacing.$spacing-0 spacing.$spacing-5;
    	white-space: pre-wrap;
    }
    
  • URL: /components/raw/text-areas/text-areas.scss
  • Filesystem Path: fractal/components/components/form/text-areas/text-areas.scss
  • Size: 413 Bytes
  • Content:
    .ontario-textarea{display:block;width:100%;min-height:144px;margin:0 0 1.5rem;white-space:pre-wrap}
  • URL: /components/raw/text-areas/text-areas.css
  • Filesystem Path: fractal/components/components/form/text-areas/text-areas.css
  • Size: 99 Bytes

Guiding principle: Give the user control.

When to use this component

A text area (or text box) is a multi-line field where the user can type in information.

Use a text area if you want the user to enter more than a single line of information.

Do not use a text area if:

  • you want users to enter answers that are only one line (instead, consider a text input)
  • it will be easier for the user to choose from a set list of options
    • users can find open-ended questions difficult to answer, so only use them when it doesn’t make sense to give them answers to choose from with a dropdown list, radio buttons or checkboxes

Text areas could be used for:

  • comments and user feedback
  • tell us about yourself sections
  • requests for more detail

Example


Provide your feedback. Comments (required). Please don't include any personal or financial information. Arrow pointing to empty text area.

Technical specifications

In general, give the user control of what they’re entering.

Do:

  • always include an associated label with a matching ID
  • include hint text only if needed
  • left-align text fields (as well as their labels and hint text)
  • allow the user to:
    • copy and paste text
    • input any characters (although this doesn’t mean they can submit any type of character, and remember you can reformat responses on the backend)
    • make their answer as long as they want (although they may get an error)
  • make the input field the appropriate height for the type of answer you want
    • this serves as a visual indicator for about how long the user’s response should be (for example, about 3 lines)
  • have the text area take up the full width of the surrounding container
  • preserve line breaks using white-space: pre-wrap;

Don’t:

  • limit the number or type of characters the user can input
    • instead, give clear instructions and/or an error message if needed – for example, Tell us about yourself (200 word maximum length)
  • put placeholder or hint text within the text area
  • remove the resizing handle in the corner of the text area that allows users to drag the corner of the field to make it longer or shorter
  • put a label or hint text in the text area itself
    • using “placeholder text” like this is not a good practice from a usability or accessibility perspective because it disappears when users start typing

If you have any questions or feedback, please get in touch.