Text area

A text area lets a user input a longer amount of text than a standard text field. It can include all of the standard validation options supported by the text field component.

Code

Stacked layout

Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts.

Default
Disabled

Label (Required) Help or instructional text goes here

<div class="form-group form-group--stacked">
  <label for="textarea" class="form-label"> … </label>
  <span class="help-block">
    <span class="help-block__text"> … </span>
    <span class="help-block__link"> … </span>
    <!-- optional warning message -->
    <div class="text-warning d-flex align-items-center space-x space-x-3">
      <svg class="icon icon-16" aria-hidden="true">
        <use xlink:href="/assets/svg/solid.svg#bell-on"></use>
      </svg>
      …
    </div>
    <!-- /optional warning message -->
  </span>
  <!-- error handling -->
  <div class="form-error" role="alert">…</div>
  <!-- /error handling -->
  <input type="text" id="" value="" placeholder="Placeholder" class="form-control" />
</div>

Symbols prefixed by underscore ("_")

When referencing/naming Symbol with a form input, any argument/option/variable that are endemic to the input itself (i.e. "id", "placeholder", "required") are **not** preceded by an _underscore. In other cases, an _underscore precedes to denote it affects the output of a container/parent element, or a sibling.

@textareaField(myForm(""),
  Symbol("_label") -> "",
  Symbol("id") -> "",
  Symbol("placeholder") -> "",
  Symbol("type") -> "",
  Symbol("required") -> false,
  Symbol("_markRequired") -> false,
  Symbol("_markOptional") -> false,
  Symbol("autocomplete") -> false,
  Symbol("readOnly") -> false,
  Symbol("enabled") -> true,
  Symbol("disabled") -> false,
  Symbol("data-rule-maxlength") -> 255,
  Symbol("rows") -> "3",
  Symbol("_help") -> "",
  Symbol("_helpLink") -> <a href="#">Link</a>,
  Symbol("class") -> "",
  Symbol("_class") -> "",
)

NameTypeDescriptionDefault valueCopy

id
string (required)
adds an id to the input and a for attribute to the associated label label
blank
_label
string
Text that describes the control. Will be both visible and clickable.
blank
placeholder
boolean
Placeholder text to display in the text field whenever it is empty.
false
type
”number” | “text” | “search” | “tel” | “url” | “email” | “password” | Learn more
Determine the type of input.
blank (but default is text)
required
boolean
Require a valid input value from the user.
false
_markRequired
boolean
A visual “required” indicator
false
_markOptional
boolean
A visual “optional” indicator
false
autocomplete
“on” | “off”
Enable automatic completion by the browser when available.
‘on’
readOnly
boolean
Disable editing of the input.
false
enabled
boolean
true
disabled
boolean
Sets the field as to appear disabled, users will not be able to interact with the text field.
false
data-rule-maxlength
number
the max length of characters the input accetps. the default is unlimited.
unlimited
rows
string
the number of rows the textarea vertically displays. this affects the height of the textarea.
”3”
class
string
adds class="" to the input
blank
_class
string
adds class="" to the container div (.form-check)
blank
_help
string
outputs additional help or instructional text
blank
_helpLink
html block (no quotes)
appends a link to help or instructional text
blank

import React, { Component } from 'react';
import Form from 'react-p21/Form';

<Form>
  <Form.Row>
    <Form.Group>
      <Form.Label>…</Form.Label>
      <Form.Control
        as="textarea"
        …
      />
    </Form.Group>
  </Form.Row>
</Form>

Learn more about its React properties

Horizontal layout

Side labels are most useful when vertical space is limited.

HTML
Twirl

<div class="form-group row">
  <div class="col-sm-3 col-md-2 d-md-flex text-md-right flex-column align-items-end">
    <label class="col-form-label" for="textarea">…</label>
    <span class="help-inline">(Required)</span>
  </div>
  <div class="col-sm-9 col-md-10 input-width--md">
    <textarea id="textarea" placeholder="Placeholder" rows="2" class="form-control"></textarea>
    <!-- error handling -->
    <div class="form-error" role="alert">…</div>
    <!-- /error handling -->
    <span class="help-block">
      <span class="help-block__text"> … </span>
      <!-- optional warning message -->
      <div class="text-warning d-flex align-items-center space-x space-x-3">
        <svg class="icon icon-16" aria-hidden="true">
          <use xlink:href="/assets/svg/solid.svg#bell-on"></use>
        </svg>
        …
      </div>
      <!-- /optional warning message -->
    </span>
  </div>
</div>

@standardTextArea(myForm(""),
  …
)

(See Twirl for stacked layouts)

Design resources

View component in Figma