BRAID
Braid Logo
 

Textarea

Open in Playroom

Alternatives

Additional labels

Supports all three levels of FieldLabel:
  • label — primary title of the field,
  • secondaryLabel — additional context, typically used to indicate optionality of a field,
  • tertiaryLabel — further context, typically used for providing assistance with a field.
 Help
Open in Playroom

Message and tone

A message is typically used to communicate the status of a field, such as an error message. This will be announced on focus of the field and can be combined with a tone to illustrate its purpose.The supported tones are: "critical", "positive", "caution", and "neutral".
Critical message
Positive message
Caution message
Neutral message
Open in Playroom

Field description

Additional context can be provided with a description. This will display below the field label and also be announced by a screen reader when the field is focused.
Extra information about the field
Open in Playroom

Disabled field

Mark the field as disabled by passing true to the disabled prop.
Open in Playroom

Specifying a height

The height is defaulted to 3 lines. This can be overridden by passing a number to the lines prop.
Height set to 5 lines
Open in Playroom

Grow height with user input

By default, the field grows in height as the user types. You can set a limit to the number of lines by passing a number to the lineLimit prop.Alternatively, this behaviour can be disabled by setting grow to "false".
Height limited to 6 lines
Open in Playroom

Limiting the number of characters

Providing a characterLimit will communicate when the input text approaches or exceeds the specified limit. All excess characters will be visually highlighted.To prevent loss of information, exceeding the limit is permitted, however the count will be presented in a critical tone.
Character limit of 50
 
-16
Open in Playroom

Highlighting ranges

To support targeted validations, specific character ranges can be highlighted. The highlightRanges prop accepts an array of start and end character positions.Supported highlight tones are critical and caution. Highlights follow the tone set on the field.Additionally, when highlighting ranges you may choose to disable the built-in spell check to prevent colliding highlights. This can be done be setting spellCheck to false.
Characters 7-20 are highlighted
Critical message
Characters 7-20 are highlighted
Caution message
Open in Playroom

Indirect or hidden field labels

In some cases it may be necessary for a field to be labelled by another element or even not to have a visual label. Instead of providing a label either aria-label or aria-labelledby can be provided.

Custom field label

The label for this field is the Heading element before it.
The label for this field is hidden.
Open in Playroom

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Textarea
  data={{ testid: 'textarea-1' }}
  // => data-testid="textarea-1"
/>
Open in Playroom