Zur Navigation
Zum Inhalt
Kontakt
Menu
Find component
Overview Mobile
Find component
Enter keyword
Basics
More Info
Brand
More Info
Image
More Info
Typography
Components
More Info
Bottom-Sheet
More Info
Button
More Info
Checkbox
More Info
Chip
More Info
Container
More Info
Context menu
More Info
Dropdown
More Info
Header
More Info
List item
More Info
List view
More Info
Loading indicator
More Info
Message
More Info
Notification Box
More Info
Pagination
More Info
Picker
More Info
Promotion-Box
More Info
Radiobutton
More Info
Segmented button
More Info
Slider
More Info
Status
More Info
Switch
More Info
Tabbar
More Info
Text input
More Info
Textarea
More Info
Toast
More Info
Up dn counter
Principles
Foundation
Accessibility
Design System
Guidelines
Deutsch
Français
Italiano
English
Our design principles
User-centred
Recognisable
Inclusive
Reduced
Holistic
Self-explanatory
Task-oriented
Appropriate
SBB Brand portal
Logo
Digital clock
Rights of use
Base colors
Functional colors
Off brand colors
Icons
Timetable icons
Pictograms
About accessibility
Über diesen Guide
Contact
Further information
Product Owner
User Research
Interaction Design
Visual Design
Development
Content Design
Testing
What is a design system?
Designing
Coding
FAQ
Help
Process
Contribution
Contact
Overview
Base
Components
Overview
Releases
Design Tokens
Components
Overview
Base
Informationen
Overview
Base
Components
Sense & Purpose
Community Assets
Instructions
App Icons
Power-Apps
Digital banner ads
SAP Design Guidelines
Textarea
Overview
What does the component do?
It is used for entering larger amounts of text in forms.
When should the component be used?
When longer entries are required from the user.
Rules
The text area always has a label.
Optional entries include the text ‘(optional)’ behind the label text. The text ‘(optional)’ can be abbreviated to ‘(opt.)’ for shorter fields.
An infoicon can be displayed in the entry field for detailed explanations. A tooltip opens if this infoicon is clicked on.
The width of the text area is always the same as the entire width of the form.
The basic height can be set when designing the form.
If the text is longer than the basic height of the text area, the text already entered shifts upwards. The text area maintains its original size.
States and variants
States
The component has the following states:
Default
Active
Error
Disabled
Variants
The component has the following variants:
listed / boxed
with icon / without icon
with label / without label
Listed, with label, without icons
Default
Placeholder
Listed, with label, with icons
Default
Placeholder
Listed, without label, with icons
Default
Placeholder
Boxed, with label, without icons
Default
Placeholder
Boxed, with label, with icons
Default
Placeholder
Boxed, without label, with icons
Default
Placeholder
Specification
Design
Imprint
Contact
Data privacy
Cookie settings