Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.
We’re hiring frontend developers! View open positions.

TextareaReady

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.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-textarea label="Label" value="Value"></nord-textarea>

Properties

PropertyAttributeDescriptionTypeDefault
resizeresize

Controls whether the textarea is resizable. By default is manually resizable vertically. Set to "auto" to enable auto-resizing as content grows.

"vertical" | "auto""vertical"
expandexpand

Controls whether the textarea expands to fill the width of its container.

booleanfalse
sizesize

The size of the component.

"s" | "m" | "l""m"
labellabel

Label for the input.

string""
hinthint

Optional hint text to be displayed with the input. Alternatively use the hint slot.

string | undefinedundefined
hideLabelhide-label

Visually hide the label, but still show it to assistive technologies like screen readers.

booleanfalse
placeholderplaceholder

Placeholder text to display within the input.

string | undefinedundefined
errorerror

Optional error to be shown with the input. Alternatively use the error slot.

string | undefinedundefined
requiredrequired

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.

booleanfalse
autocompleteautocomplete

Specifies the data type of the field, so that the browser may attempt to fill out the field automatically on behalf of the user.

AutocompleteAttribute"off"
readonlyreadonly

Makes the component readonly, so that it is not editable. Readonly differs from disabled in that readonly fields are still focusable and will be submitted with a form.

booleanfalse
disableddisabled

Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.

booleanfalse
namename

The name of the form component.

string | undefinedundefined
valuevalue

The value of the form component.

string""
form

Gets the form, if any, associated with the form element.

undefined

Events

EventDescriptionType
input

Fired as the user types into the input.

NordEvent
change

Fired whenever the input's value is changed via user interaction.

NordEvent

Slots

Slot nameDescription
labelUse when a label requires more than plain text.
hintOptional slot that holds hint text for the textarea.
errorOptional slot that holds error text for the textarea.

Methods

Method nameParametersDescription
focus(options?: FocusOptions) => voidoptions: An object which controls aspects of the focusing process.
Programmatically move focus to the component.
blur() => voidN/AProgrammatically remove focus from the component.
click() => voidN/AProgrammatically simulates a click on the component.

CSS Properties

CSS Custom Properties provide more fine grain control over component presentation. We advise utilizing existing properties on the component before using these.

PropertyDescriptionDefault
--n-textarea-inline-size

Controls the inline size, or width, of the textarea.

240px
--n-textarea-block-size

Controls the block size, or height, or the textarea.

76px
--n-textarea-background

Controls the background of the textarea, using our color tokens.

var(--n-color-active)
--n-textarea-color

Controls the text color of the textarea, using our color tokens.

var(--n-color-text)
--n-textarea-border-color

Controls the border color of the textarea, using our color tokens.

var(--n-color-border-strong)
--n-textarea-border-radius

Controls how rounded the corners are, using border radius tokens.

var(--n-border-radius-s)

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

  • Use to allow text input where the expected input is long.

Don’t #

  • 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:

Company name
What is your company name?

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):

Provide description
Provide Description

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:

Leave a comment
Comment

Do not use colons in textarea labels:

Provide description
Provide description:

Integration

For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines

Localization

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.

Localization Guidelines

Troubleshooting

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.


Was this page helpful?

YesNo
Send feedback

We use this feedback to improve our documentation.