Examples
Examples
Basic Usage
A label will be displayed when provided via the label property.
Help Text & Placeholder
The help text and placeholder serve the purpose of guiding a user's input by providing additional information.
A help text provides more context as to why and how the data that is requested is relevant whereas a placeholder showcases an example of how data should be entered.
A help text can either be passed as an attribute for simple string-based content or via a slot for rich formatted content.
Required and Optional
Adding a required or optional label helps users to be guided while filling out a form. For example, Textareas are marked as "Required" when the majority of the fields in the same form are optional.
States
The Textarea supports a wide range of different states.
Validation
A Textarea's validity can either be determined automatically when used inside a form or can be controlled from outside based on custom rules and application business logic.
Inside a form
Textareas seamlessly integrate into a form's validation workflows and validate when a form is submitted. When no custom validation message is provided, the Textarea falls back to the browser's native validation message.
Inside an application
Textareas can be individually flagged as invalid based on custom rules or other business logic of an application. When flagged as invalid, a Textarea expects a descriptive validation message to be set alongside.
Height and Resizing
The Textarea comes with a default height to fit four lines of text. Their height can be either increased using the rows property or allow users to resize them by setting resizable
Listening to Events
The Textarea supports the most commonly used events.
💡 Did you know?
Some native events like change are blocked by the Shadow DOM boundary of the web component standard. Hence some of them are proxied through custom events.
Find out more: Form Input Events & API