Collect longer text
Use textareas for responses that may need more than one line.
Use textareas for responses that may need more than one line.
Rows and resize options help the field fit the expected response length.
Textarea uses the same validation and helper patterns as other form fields.
Label
Value
Hint text
Input container
Character count
Use hint text to clarify expectations for the response.
Default. Use when the label alone is enough.
Show a placeholder to suggest the kind of content the user can enter.
Empty textarea with no inline helper.
Set maxlength to show the character count below the textarea.
Default. No count appears when maxlength is not set.
Use the rows attribute to set the visible height of the textarea.
Compact textarea suited to short responses.
Control whether the user can resize the textarea.
Drag the bottom-right corner to resize vertically.
Display a value that the user can read and copy but not edit.
Default editable textarea.
Disable the textarea to prevent it from being edited or focused.
Default interactive state.
Mark the textarea as required when the form cannot be submitted without a value.
Default. The textarea can be left blank.
Use minlength and maxlength to validate the allowed response length.
Use minlength when the response needs enough detail.
Show error styling and a feedback message when the input is invalid.
No feedback shown.
Each row is a colour, spacing, or size value the component uses, and the right-most column tells you where in the component you'll see it.
sgds-form-padding-x—sgds-form-padding-y—sgds-dimension-136—sgds-icon-size-md—Use textarea when users may write more than one line. Feedback, descriptions, or notes.
For a one-line value like a name or reference number, use a text input. Textarea implies a longer response.
Set resize to auto so the textarea grows with the content rather than trapping users in a tiny scroll area.
Avoid resize="none" for open-ended questions. Users get stuck scrolling once they exceed the visible rows.
disabled, readonly, required, invalid, and feedback states.TabShift+TabText keysEnterShare them with us on Slack → #ask-sgds-v3
Report it on GitHub Issues → sgds/components/textarea
The Singapore Government Design System was developed to empower teams in creating fast, accessible and mobile-friendly digital services.