Get startedFoundationsComponentsPatternsGuidelinesResourcesAI
This site is a work in progress as part of GovTech {build} hackathon. Content may be incomplete or subject to change.

Textarea

Text areas allow for the collection of input longer than a single line.

GitHubGitHub logocomponents/textarea
StorybookStorybook logocomponents/textarea
DesignUsageAccessibilityUpdates

Purpose

Capture longer text input

Textareas are designed for open-ended responses — feedback, notes, descriptions — where a single line isn't enough room.

Resize to fit the content

The textarea grows to accommodate longer entries, so users aren't constrained to a tiny box when they have more to say.

Same validation patterns as input

Error, warning, and success states follow the same conventions as the standard input, so validation feedback is consistent across the form.

Anatomy

1

Textarea field

2

Hint and feedback

Configuration

Default

The textarea is a multi-line text input for collecting longer freeform responses.

Renders a multi-line text input. Use when users need to enter more than a single line of text — such as feedback, notes, or detailed descriptions.

Playground

BETA

Structure

Component tokens

Component tokens are specific to each component. Use the table title as the prefix: form-padding-x under sgds/textarea means sgds/textarea/form-padding-x.

sgds/textarea
CategoryComponent tokenSemantic tokenValueFormform-padding-xsgds/form/padding/x—form-padding-ysgds/form/padding/y—Sizedimension-136sgds/dimension/136—

Usage

When to use

  • Use textarea when users need to enter a longer freeform response.
  • Use it for content that may span several sentences or needs room to explain context.

When not to use

  • Do not use textarea for short structured values that belong in a smaller field.
  • Do not leave the prompt so vague that users do not know what level of detail to provide.

Best practices

Set expectations for the response

Users write better answers when they know what kind of detail the field is asking for.

Do not leave the prompt ambiguous

An unclear prompt makes responses less useful and harder to review later.

Accessibility considerations

Built-in accessibility

  • Textareas render native textarea controls and connect labels, hint text, and feedback to the control.
  • The component supports disabled, read-only, required, invalid, and feedback states.

Labels and content

  • Use a visible label that tells users what to enter.
  • Use hint text for character limits or formatting expectations.

Focus and interaction

  • Focus should move to the textarea in form order.
  • Keep validation feedback close to the textarea.

Keyboard interaction

KeyInteractionTabMoves focus from the textarea to the next focusable element.Shift+TabMoves focus to the previous interactive element.Text keysEnters or edits text in the textarea.EnterAdds a new line in the textarea.

Updates

DateVersionDescriptionLoading updates…

Roadmap

Planned itemStatusTargetFuture enhancements for textareaPlannedTBD

Feedback

Have suggestions or feedback?

Share them with us on Slack → #design-system-feedback

Bug Reports

Found a bug or issue?

Report it on GitHub Issues → sgds/components/textarea

Singapore Government Design System

The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.