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.

Open in new window

View RTL

<nord-textarea label="Label" value="Value"></nord-textarea>

<nord-textarea
  label="Message"
  resize="auto"
  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."
></nord-textarea>

<nord-textarea label="Label" value="Value" maxlength="100" character-counter></nord-textarea>

<nord-textarea label="Label" expand resize="auto" style="--n-textarea-block-size: 200px"></nord-textarea>

<nord-textarea label="Label" value="Some value" disabled></nord-textarea>

<nord-textarea label="Message" expand></nord-textarea>

<nord-textarea label="Message" placeholder="Enter your message here" hide-label></nord-textarea>

<nord-textarea label="Label" value="Value" readonly></nord-textarea>

<nord-textarea label="Required" required value="Value"></nord-textarea>

<nord-stack>
  <nord-textarea size="s" label="Label" placeholder="Write your message"></nord-textarea>
  <nord-textarea size="m" label="Label" placeholder="Write your message"></nord-textarea>
  <nord-textarea size="l" label="Label" placeholder="Write your message"></nord-textarea>
</nord-stack>

<nord-stack>
  <nord-textarea label="Text selection" value="Norfryd"></nord-textarea>
  <nord-stack direction="horizontal" gap="s">
    <nord-button-group>
      <nord-button id="select-all-button" size="s">Select all</nord-button>
      <nord-button id="select-range-button" size="s">Select range</nord-button>
    </nord-button-group>
    <nord-button-group>
      <nord-button id="replace-selection-button" size="s">Replace selection</nord-button>
      <nord-button id="remove-selection-button" size="s">Remove selection</nord-button>
    </nord-button-group>
  </nord-stack>
</nord-stack>

<script>
  const textarea = document.querySelector("nord-textarea")
  const selectAllButton = document.querySelector("#select-all-button")
  const selectRangeButton = document.querySelector("#select-range-button")
  const replaceSelectionButton = document.querySelector("#replace-selection-button")
  const removeSelectionButton = document.querySelector("#remove-selection-button")

  selectAllButton.addEventListener("click", () => {
    textarea.select()
    textarea.focus()
  })

  selectRangeButton.addEventListener("click", () => {
    textarea.setSelectionRange(3, 6)
    textarea.focus()
  })

  replaceSelectionButton.addEventListener("click", () => {
    textarea.setRangeText("foo")
    textarea.focus()
  })

  removeSelectionButton.addEventListener("click", () => {
    textarea.setRangeText("")
    textarea.focus()
  })

  textarea.addEventListener("blur", () => {
    console.log("selectionStart", textarea.selectionStart)
    console.log("selectionEnd", textarea.selectionEnd)
  })
</script>

<nord-textarea label="Message">
  <div slot="error">This field is <strong>required</strong></div>
</nord-textarea>

<nord-textarea label="Label" expand>
  <div slot="hint">
    Hint is an accessible way to provide <strong>additional information</strong> that might help the user
  </div>
</nord-textarea>

<nord-textarea>
  <div slot="label">Label <span style="color: var(--n-color-status-success)">with color</span></div>
</nord-textarea>

<nord-textarea
  label="Label"
  hint="Hint is an accessible way to provide additional information that might help the user"
  expand
></nord-textarea>

<nord-textarea label="Message" placeholder="Placeholder text goes here"></nord-textarea>

<nord-textarea label="Label" error="This field is required"></nord-textarea>

Properties

Property	Attribute	Description	Type	Default
`resize`	`resize`	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"`
`expand`	`expand`	Controls whether the textarea expands to fill the width of its container.	`boolean`	`false`
`maxLength`	`maxlength`	Controls the max allowed length for the textarea.	`number \| undefined`	`undefined`
`characterCounter`	`character-counter`	Controls whether to show a count of the number of characters in the textarea. When combined with `maxlength`, both the count and the max length are shown.	`boolean`	`false`
`size`	`size`	The size of the component.	`"s" \| "m" \| "l"`	`"m"`
`label`	`label`	Label for the input.	`string`	`""`
`hint`	`hint`	Optional hint text to be displayed with the input. Alternatively use the hint slot.	`string \| undefined`	`undefined`
`hideLabel`	`hide-label`	Visually hide the label, but still show it to assistive technologies like screen readers.	`boolean`	`false`
`placeholder`	`placeholder`	Placeholder text to display within the input.	`string \| undefined`	`undefined`
`error`	`error`	Optional error to be shown with the input. Alternatively use the error slot.	`string \| undefined`	`undefined`
`required`	`required`	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.	`boolean`	`false`
`hideRequired`	`hide-required`	Visually hide the required indicator, but still show required attribute to assistive technologies like screen readers.	`boolean`	`false`
`autocomplete`	`autocomplete`	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"`
`readonly`	`readonly`	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.	`boolean`	`false`
`selectionStart`	–	Gets or sets the starting position or offset of a text selection. MDN Reference		`undefined`
`selectionEnd`	–	Gets or sets the end position or offset of a text selection. MDN Reference		`undefined`
`selectionDirection`	–	Gets or sets the direction in which selection occurred. MDN Reference		`undefined`
`disabled`	`disabled`	Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.	`boolean`	`false`
`name`	`name`	The name of the form component.	`string \| undefined`	`undefined`
`value`	`value`	The value of the form component.	`string`	`""`
`form`	`form`	Gets the form, if any, associated with the form element. The setter accepts a string, which is the id of the form.	`HTMLFormElement \| null`	`undefined`

Events

Event	Description	Type
`select`	Fired when some text has been selected.	`NordEvent`
`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 name	Description
`label`	Use when a label requires more than plain text.
`hint`	Optional slot that holds hint text for the textarea.
`error`	Optional slot that holds error text for the textarea.

Methods

Method name	Parameters	Description
`select() => void`	N/A	Selects all the text in the text field. MDN Reference
`setSelectionRange(start: number \| null, end: number \| null, direction?: "forward" \| "backward" \| "none") => void`	`start`: The offset into the text field for the start of the selection. `end`: The offset into the text field for the end of the selection. `direction`: The direction in which the selection is performed.	Sets the start and end positions of a selection in the text field. MDN Reference
`setRangeText(replacement: string, start?: number, end?: number, selectMode: "select" \| "start" \| "end" \| "preserve") => void`	`replacement`: The string to insert. `start`: The 0-based index of the first character to replace. Defaults to the current `selectionStart` value (the start of the user's current selection). `end`: The 0-based index of the character after the last character to replace. Defaults to the current `selectionEnd` value (the end of the user's current selection). `selectMode`: A string defining how the selection should be set after the text has been replaced.	Replaces a range of text with a new string. MDN Reference
`getNativeElement() => void`	N/A	Returns the native `<input>` or `<textarea>` element used under the hood.
`focus(options?: FocusOptions) => void`	`options`: An object which controls aspects of the focusing process.	Programmatically move focus to the component.
`blur() => void`	N/A	Programmatically remove focus from the component.
`click() => void`	N/A	Programmatically 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.

Property	Description	Default
`--n-textarea-inline-size`	Controls the inline size, or width, of the textarea.	`240px`
`--n-textarea-block-size`	Controls the block size, or height, of 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)`
`--n-label-color`	Controls the text color of the label, using our color tokens.	`var(--n-color-text)`

Localization

This component requires localization in a multi-lingual application. The following keys are required when registering a translation:

Key	Description
`remainingCharacters`	A function which receives the number of remaining characters and returns a string to be used as the aria-live message.

For full localization guidelines, please see Localization documentation.

Localization Guidelines

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:

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

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.