Textarea is a component that allows user to write text over multiple rows. Used when the expected user input is long. For shorter input, use the Input component.
value="This is a component that allows user to write text over multiple rows. Used when the expected user input is long. For shorter input, use the Input component."
Controls whether the textarea is resizable. By default is manually resizable vertically. Set to "auto" to enable auto-resizing as content grows.
Label for the input.
Optional hint text to be displayed with the input. Alternatively use the hint slot.
Visually hide the label, but still show it to assistive technologies like screen readers.
Placeholder text to display within the input.
Optional error to be shown with the input. Alternatively use the error slot.
Determines whether the input is required or not. An input marked as required will be announced as such to users of assistive technology. When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.
Controls whether the input expands to fill the width of its container.
Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.
The name of the form component.
The value of the form component.
|Fired as the user types into the input.|
|Fired whenever the input's value is changed via user interaction.|
|Use when a label requires more than plain text.|
|Optional slot that holds hint text for the textarea.|
|Optional slot that holds error text for the textarea.|
|Programmatically move focus to the component.|
|N/A||Programmatically remove focus from the component.|
|N/A||Programmatically simulates a click on the component.|
This section includes guidelines for designers and developers about the usage of this component in different contexts.
- Use to allow text input where the expected input is long.
- Don’t use when the expected text input is short. Use input component instead.
Content guidelines #
Textarea labels act as a title for the text field. Labels should typically be short and in noun form:
When writing textarea labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
When a textarea isn’t part of a form and is placed individually on a page, you could provide the textarea label as a call to action:
Do not use colons in textarea labels:
Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.
If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.