Design System

British Columbia Government Design System for Digital Services


Last Updated: February 11, 2019


A textarea allows users to input multiple lines of text



Use This When

  • Users need to enter more than a single line of text

Don't Use This For

  • When users need to enter only one line of text, use a text input instead

Design Guidance

  • Open ended questions can often be difficult for users to answer. Consider breaking up the question into multiple single line text inputs.
  • Allow copy and paste functionality
  • Do not use placeholder text instead of labels. Screenreaders do not treat placeholder text as labels. Placeholder text dissapears which can confuse users if they forget the original prompt.
  • Make sure the textarea size is proportional to the amount of text you expect the user input


Thick borders with generous spacing result in greater visual prominence. These features also support mobile use by providing larger target areas.


  1. Do not automatically advance to next input field. This feature is not common and can cause difficulties for novice users and those who rely on keyboard controls. Read more about prioritizing efficiency over expectations
  2. When in focus input field should outline with blue.
  3. Fields should have error controls such as not accepting more values than required, rejecting false values, and rejecting outlier values.


This component has been built according to WCAG 2.0 AA standards and all government services should strive to meet this level. This component successfully includes the following accessibility features:


As read using ChromeVox

"Can you provide more detail?"


Colour Contrast

  • Input field border width has been increased for improved visibility



      <div class="text_label">
        <label>Can you provide more detail?</label>
      <textarea class="text_input" name="name" rows="8" cols="60"></textarea>


form {
  font-family: ‘BCSans’, ‘Noto Sans’, Verdana, Arial, sans-serif;
  font-size: 18px;

.text_input {
  font-family: ‘BCSans’, ‘Noto Sans’, Verdana, Arial, sans-serif;
  font-size: 18px;
  border: 2px solid #606060;
  margin-top: 5px;
  margin-bottom: 15px;
  border-radius: 4px;
  padding: 5px;
  resize: none;

.text_input:focus {
    outline: 4px solid #3B99FC;
    outline-offset: 1px;

.text_label {
  display: flex;
  • Create an Issue

Design System

  • home
  • disclaimer
  • privacy
  • accessibility
  • copyright
  • contact us
  • Government Of BC