Skip to main content
In progress

TextArea

A TextArea is a multi-line input field used for longer, free‑form responses that span multiple lines, such as descriptions, messages or feedback.

Code example
import { Textarea } from '@yleisradio/yds-components-react';

<Textarea
  id="basic"
  label="Message"
  placeholder="Type here..."
  rows={4}
/>

Why to use​

Text Areas enable users to provide longer, free-form content such as messages, descriptions, or feedback. They support helper text, character limits, and validation feedback (error/success) so users can compose content confidently and within constraints.

When to use​

Use a TextArea when users need to provide multi-line or open-ended text that extends beyond a short single-line response. TextAreas are ideal for descriptions, comments, messages, feedback and any content that may span several sentences.

They are well suited for forms, support flows, reporting tools and writing tasks where users need space to elaborate.

Do
  • Use TextArea for multi-line, expressive or long-form responses.
  • Provide helper text for expectations such as format, length or purpose.
  • Set rows to an appropriate default height for expected content.
  • Use characterLimit when you must restrict length; show the limit near the field.
  • Keep full width on mobile and proportionate width on larger screens.
  • Apply real‑time validation where helpful.
  • Keep cognitive load low—only include needed fields.
Don’t
  • Don’t use for short, single‑line answers — use TextInput instead.
  • Don’t rely on placeholder text as the only instruction.
  • Don’t make the default area excessively tall — allow field to grow when content grows.
  • Don’t rely solely on color for validation — include clear text messages.
  • Don't use TextArea when rich text formatting is required — use a rich text editor instead.

Content Guidelines​

TextArea fields should guide users to write clear, complete responses without overwhelming them. Labels, descriptions and error messages must support open-ended input.

Do
  • Use short, clear labels (e.g., “Kuvaus”, “Viesti”, “Palaute”).
  • Provide helpful descriptions to set expectations (esim. “Kuvaile ongelmaa mahdollisimman tarkasti”).
  • Use placeholder text for examples, not instructions (e.g., “Kaikki alkoi siitä…”)
  • Explain character limits and show a counter when used.
  • Write actionable error messages (e.g., “Kirjoita vähintään 50 merkkiä”).
  • Keep guidance brief and scannable.
Don’t
  • Don’t duplicate the label in the description.
  • Don’t use vague wording like “Kirjoita jotain”.
  • Don’t rely on placeholder text as the only guidance.
  • Don’t use generic errors like “Virheellinen syöte”. -Don’t include filler like “Huomioithan että…”.
  • Don’t include long, dense instructional paragraphs.

Anatomy​

TextArea anatomy

  1. Label – Describes the purpose of the field.
  2. Placeholder – Example or hint text inside the area.
  3. Input field – Multi-line area where users enter text.
  4. Description – Additional guidance or context below the field.
  5. Character counter – Displays the number of typed and remaining characters.
  6. Optional field indicator – Shows that the field is not required to fill.

Key Props​

Use the following props to configure the Textarea component.

rows​

Sets the initial visible height (in text rows). Content beyond this height becomes scrollable.

TypeExampleDescription
number
Controls initial vertical size of the field.
Code example
<Textarea
  id="rows-demo"
  label="Comments"
  rows={3}
  placeholder="Type your message..."
/>

label​

info

Label can be visually hidden but must remain readable for screen readers.

TypeExampleDescription
string
Provides a clear purpose for the field.
Code example
<Textarea
  id="bio"
  label="Bio"
/>

description​

Helper guidance placed below the field.

TypeExampleDescription
string

Tell us about yourself

Clarifies purpose, format, or constraints.
Code example
<Textarea
  id="bio"
  label="Bio"
  description="Tell us about yourself"
  placeholder="I like carrots..."
/>

success​

Provide feedback after user action or async validation.

TypeExampleDescription
boolean
Indicates successful validation.
Code example
  <Textarea
    id="s1"
    label="Feedback"
    defaultValue="All set"
    success
  />

errorMessage​

Provide feedback after user action or async validation.

TypeExampleDescription
string
Displays a validation error below the field. Sets aria-invalid.
Code example
  <Textarea
    id="e1"
    label="Feedback"
    defaultValue="Too short"
    errorMessage="Text should be at least 50 characters"
  />

isDisabled​

Makes the field non‑interactive and visually dimmed.

TypeExampleDescription
boolean

Confirmed value cannot be edited

Temporarily prevents user interaction.
Code example
<Textarea id="dis" label="Summary" value="Confirmed text" isDisabled description="Confirmed value cannot be edited" />

characterLimit​

Restricts input length and shows a live character counter (current / limit). Prevents exceeding the limit via maxLength.

TypeExampleDescription
number

Max 140 characters.

0 / 140
Enforces and displays remaining capacity.
Code example
<Textarea id="limit" label="Bio" characterLimit={140} description="Max 140 characters." />

Behavior​

  • Default height is controlled via rows; the area becomes scrollable when content exceeds the visible space.
  • The label appears above the field; helper text is read immediately after the label.
  • Validation feedback appears as error or success states with color and text.
  • Disabled state blocks input and dims visuals.
  • On mobile, the component should be full-width.
  • Match the default height and width to the expected content length (do not oversize).

Accessibility​

Implementation examples​

Describe your problem​

How to use placeholder, description and optional label in TextArea.

Provide as much detail as possible.

Code example
<Textarea
  id="opt-ex"
  label="Describe your problem"
  description="Provide as much detail as possible."
  labelOptions={{ optionalLabel: '(Optional)' }}
  rows={3}
  placeholder="It all started, when..."
/>

With error​

Error state provides a clear indication that went wrong and error message tells how to fix it.

Code example
<Textarea
  id="err-ex"
  label="Describe your problem"
  labelOptions={{ optionalLabel: '(Optional)' }}
  defaultValue="It all started, when..."
  errorMessage="Please provide more detail"
  rows={3}
/>

Character limit​

Max 50 characters.

0 / 50
Code example
import { useState } from 'react';
import { Textarea } from '@yleisradio/yds-components-react/';

export const TextAreaCharacterLimit = () => {
  const [text, setText] = useState('');

  return (
    <Textarea
      id="feedback"
      value={text}
      rows={3}
      characterLimit={50}
      onChange={(e) => setText(e.target.value)}
      description="Max 50 characters."
      label="Describe your problem"
      labelOptions={{ optionalLabel: '(Optional)' }}
      placeholder="It all started, when..."
    />
  );
};

API Reference​

Props​

The Textarea component accepts all standard HTML <textarea> attributes in addition to the following props:

PropTypeRequiredDefaultDescription
labelstringYes—
labelOptionsFormElementLabelDSPropsNo{}
idstringYes—
valuestringYes—
onChange(e: React.ChangeEvent<HTMLTextAreaElement>) => voidYes—
placeholderstringNo—
rowsnumberNo—
descriptionstringNo—
errorMessagestringNo—
successbooleanNofalse
isDisabledbooleanNofalse
characterLimitnumberNo—

Type Definitions​

export interface TextareaDSProps {
  label: string;
  labelOptions?: FormElementLabelDSProps;
  id: string;
  value: string;
  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
  placeholder?: string;
  rows?: number;
  description?: string;
  errorMessage?: string;
  success?: boolean;
  isDisabled?: boolean;
  characterLimit?: number;
}

export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & TextareaDSProps;