Textarea

The textarea component allows users to input multiple lines of text.

Code

Usage

import { Formik } from "formik";
import { Textarea, Form } from "@twilio-labs/match/components";
const Component = () => (
<Formik initialValues={{ message: "" }} onSubmit={() => {}}>
<Form>
<Textarea name="message" label="Message" />
</Form>
</Formik>
);

Props

PropTypeDefaultDescription
namestringnull
labelstringnull
required?booleannullSets the input as required.
disabled?booleannullDisables the input.
readOnly?booleannullSets the input as readonly.
hideLabel?booleannullVisually hides the label.
placeholder?stringnullSets the input's placeholder text.
additional?stringnullSupporting validation instructions.
minLength?numbernullMinimum character count.
maxLength?numbernullMaximum character count.
rows?number3Default number of rows to display (3-10).
resize?TextareaResizeOptions'manual''manual', 'smart'
validate?(value: string) => stringnullOverrides built in validation.
noValidate?booleannullDisables built in validation.

Also supports margin props.


Guidelines

About Textareas

Textareas are interactive form controls that accept multiple lines of text from a user. They accept any combination of letters, number, symbols and line breaks.

Accessibility

Here are some quick accessibility tips to ensure a positive user experience for all users.

  • Always include a descriptive label for each Textarea.
  • Do not use placeholder text as a replacement for labels.
  • Always allow textareas to be resized manually or automatically.
  • Use additional to provide information on how to pass the Textarea's validation.
  • Use error messages to provide information on how to correct invalid data.

Composition

All Textareas must include a label. A label may be visually hidden only if the purpose of the Textarea is abundantly apparent. The hideLabel prop will remove the label entirely and apply an aria-label to the textarea element for screen readers.

Labels should be short and descriptive with any instructional text belonging in additional.

When a Textarea contains invalid data, provide an error message with instructional cues on how to make the correction. Any additional provided with the Textarea will be replaced by the validation error. Be sure to repeat any relevant information that would have been lost.

Textarea should only be used on a white background.

Do
  • Use a textarea for a longer entry and a text input for short entries.
  • Only use placeholder text when clarification is required, try not to overuse it.
  • Use help text to provide additional information to the user that could help prevent errors.
  • Make sure every textarea has a label.
  • Use disabled to show a user that an input can not be interacted with yet.
Don't
  • Don’t use a textarea for a short text entry.
  • Don’t use placeholder text for every field.
  • Don’t use placeholder text to provide error preventing information.
  • Don’t use placeholder or help text in place of a label.
  • Don’t use disabled to show information in an input that cannot be edited.

Examples

Textarea with Help Text

Labels and help text are controlled via the Textarea component props in order to ensure consistency and accessibility best practices.

Textarea with Error

Textareas come with basic constraint validation enabled by default. You may override the built in validation with the validate prop, or completely disable with noValidate. For more advanced validation please read the Formik documentation. Note that additional is replaced by the validation error.

Disabled Textarea

Disabled form fields cannot be interacted with. Use a read-only field for showing static information which cannot be edited.

Read-only Textarea

Read-only textareas can be focused but cannot be edited. Use a read-only Textarea when a user should be able to select and copy the text within. An example of when to use a read-only textarea may be displaying a user's responses after a form has been submitted.

Smart Resize

Smart resize will dynamically adjust the texarea's height as a user types. Height is constrained to a minimum of 3 visible rows and a maximum of 10.