Textarea

The <nys-textarea> is a reusable web component for use in New York State digital products. It allows users to input multiple lines of text to be collected.

Example Code 
<nys-textarea
  id="quote"
  label="Enter your favorite quote:"
  value="Majorities, of course, start with minorities."
></nys-textarea>

Options

Rows

The rows attribute specifies the visible height of a text area, in number of lines.

The default value is 4

Example Code 
<nys-textarea label="This textarea renders with 6 rows" rows="6"></nys-textarea>

Width

If no width is provided, the nys-textarea will default to full. Supported widths are sm, md, lg, and full.

width="full" will take up the full width of the parent container.

If an invalid option is assigned to width, it will be ignored and default to full.

Example Code 
<nys-textarea width="md" label="This textarea is md"></nys-textarea>

Resize

By default a user can resize the nys-textarea vertically. If you want to disallow resizing altogether add resize="none"

Note: resize is not affected by setting nys-textarea to disabled or readonly and they are independent.

Example Code 
<nys-textarea label="This textarea is not resizable" resize="none"></nys-textarea>

Description

You can include a description to provide additional context for the user. This is useful for providing instructions or clarifying the input. You can include a description as a property or slot it into the element.

Description slot providing more options
Example Code 
<nys-textarea label="Label" description="description property"></nys-textarea>

<nys-textarea label="Label">
  <p slot="description">Description slot <a href="https://ny.gov">providing more options</a></p>
</nys-textarea>

Disabled

Example Code 
<nys-textarea label="Disabled textarea" disabled></nys-textarea>

Readonly

Example Code 
<nys-textarea readonly label="Readonly teextarea" value="This text cannot be changed"></nys-textarea>

Max length

Example Code 
<nys-textarea maxlength="10" label="Max Length" description="You cannot type more than 10 characters in the below field"></nys-textarea>

Error Message

To display an error message, pass in the showError property to the nys-select component. Setting errorMessage does not display the message without showError set to true.

Example Code 
<nys-textarea showError errorMessage="You did not provide a value for this field." label="Describe the incident" ></nys-textarea>

Usage

When to use this component

  • To collect multiple lines of text input from the user (e.g., comments, descriptions).
  • For open-ended input specific to the user (e.g., personal notes, feedback).

When to consider something else

  • If you need to collect a single line of text input, use an input field instead.
  • If the input should be selected from predefined options, use a dropdown or radio button.

Do

  • Use the nys-textarea for long-form text like descriptions or detailed feedback.
  • Use the nys-textarea when precise user input is required in multiple lines.

Don't

  • Don't use the nys-textarea for short or single-line inputs (use nys-input instead).
  • Don't use the nys-textarea for data selection tasks (e.g., dropdowns or predefined options).

Accessibility

The nys-textarea component includes the following accessibility-focused features:

  • Proper ARIA roles and attributes to ensure screen readers can interpret the label correctly.
  • Keyboard navigation support, allowing users to tab into the input using the keyboard.
  • Visual focus indicators to help users navigate the component.
  • Include a label property to provide accessible text for screen readers.

Properties

Property Type
label string
value string
errorMessage string
showError boolean
id string
name string
description string
placeholder string
disabled boolean
readonly boolean
required boolean
form string
maxLength integer
width string ("sm", "md", "lg", "full")
rows integer
resize string ("none")

CSS Variables


Events

The nys-textarea component emits three custom Javascript events:

  1. nys-checkValidity – Fired when the textarea state changes.
  2. focus – Fired when the textarea gains focus.
  3. blur – Fired when the textarea loses focus.

You can listen to these events using JavaScript:

// Select the textarea component
const textarea = document.querySelector('nys-textarea');

// Listen for the 'nys-checkValidity' event
textarea.addEventListener('nys-checkValidity', (event) => {
  console.log('Text input changed:', event.target.value);
});