Textarea
Examples
Basic Textarea with Label
With Value
Help Text
Label with Tooltip
Label with Context Note
Placeholders
Rows
Sizes
Resize Options
Character Limits
Disabled
Readonly
Required
Transparent Style
Flush Style
Text Input Options
Form Integration
Custom Validation
Character Count Display
Programmatic Control
Selection and Range Methods
Events
Customizing Label Position
Importing
Slots
Properties
Events
Methods
Parts

Textarea

<zn-textarea> | ZnTextarea

Since 2.0

stable

Textareas collect data from the user and allow multiple lines of text.

<zn-textarea label="Comments" placeholder="Enter your feedback here..."></zn-textarea>

Examples

Basic Textarea with Label

Use the label attribute to give the textarea an accessible label.

<zn-textarea label="Month in review"></zn-textarea>

This component works with standard <form> elements. Please refer to the section on form controls to learn more about form submission and client-side validation.

With Value

Set the initial value using the value attribute.

<zn-textarea label="Description" value="This is some initial text content."></zn-textarea>

You can also set the value using text content inside the element.

This is the initial content set via text content. It can span multiple lines.

<zn-textarea label="Notes">
This is the initial content set via text content.
It can span multiple lines.
</zn-textarea>

Help Text

Add descriptive help text to a textarea with the help-text attribute. For help text that contains HTML, use the help-text slot instead.

Tell us the highlights. Be sure to include details about any financial performance anomalies.

<zn-textarea label="Month in review" help-text="Tell us the highlights. Be sure to include details about any financial performance anomalies."></zn-textarea>
<br />
<zn-textarea label="Month in review">
  <div slot="help-text">Tell us the highlights. Be sure to include details about any financial performance <strong>anomalies</strong>.</div>
</zn-textarea>

Use the label-tooltip attribute to add text that appears in a tooltip triggered by an info icon next to the label.

Usage: Use the label tooltip to provide helpful but non-essential instructions or examples to guide people when filling in the textarea. Use help text to communicate instructions or requirements for filling in the textarea without errors.

<zn-textarea label="Month in review" help-text="Tell us the highlights. Be sure to include details about any financial performance anomalies." label-tooltip="There is no required format for this commentary. However, we suggest covering the following topics: 1) Revenue, 2) COGS, 3) Gross profit, and 4) Operating expenses."></zn-textarea>

Label with Context Note

Use the context-note attribute to add text that provides additional context or reference. For text that contains HTML, use the context-note slot. Note: On small screens the context note will wrap below the label if there isn’t enough room next to the label.

Usage: Use a context note to provide secondary contextual data, especially dynamic data, that would help people when filling in the textarea. Use help text to communicate instructions or requirements for filling in the textarea without errors.

<zn-textarea label="Month in review" help-text="Tell us the highlights. Be sure to include details about any financial performance anomalies." context-note="Data synced 1 hr ago"></zn-textarea>

Placeholders

Use the placeholder attribute to add a placeholder.

<zn-textarea label="Feedback" placeholder="Type something"></zn-textarea>

Rows

Use the rows attribute to change the number of text rows that the textarea shows before the text starts to overflow and the textarea scrolls. The default is 4 rows.

<zn-textarea label="Textarea with 2 rows" rows="2"></zn-textarea>
<br />
<zn-textarea label="Textarea with 4 rows (Default)" rows="4"></zn-textarea>
<br />
<zn-textarea label="Textarea with 6 rows" rows="6"></zn-textarea>

Sizes

Use the size attribute to change a textarea’s size. Available sizes are small, medium (default), and large.

<zn-textarea label="Small textarea" size="small"></zn-textarea>
<br />
<zn-textarea label="Medium textarea" size="medium"></zn-textarea>
<br />
<zn-textarea label="Large textarea" size="large"></zn-textarea>

Resize Options

Control how the textarea can be resized using the resize attribute. Options are vertical (default), none, and auto.

Vertical Resize (Default)

By default, textareas can be resized vertically by the user.

<zn-textarea label="Vertically resizable" resize="vertical"></zn-textarea>

Prevent Resizing

To prevent resizing, set the resize attribute to none.

<zn-textarea label="No resizing allowed" resize="none"></zn-textarea>

Auto-Resize

Textareas will automatically resize to expand to fit their content when resize is set to auto.

Note: If using ts_form_for, note that the default resize option is already set to auto. To match the zn-textarea default of vertical, set resize: "vertical" in input_html (see code example below).

<zn-textarea label="Expanding textarea" resize="auto" value="Someone's sitting in the shade today because someone planted a tree a long time ago..." rows="2"></zn-textarea>

Try typing multiple lines in the textarea above to see it automatically expand.

Character Limits

Use the maxlength attribute to limit the number of characters that can be entered. The minlength attribute sets a minimum character requirement.

<zn-textarea label="Tweet" maxlength="280" help-text="Maximum 280 characters"></zn-textarea>
<br />
<zn-textarea label="Review" minlength="20" maxlength="500" help-text="Must be between 20 and 500 characters"></zn-textarea>

Disabled

Use the disabled attribute to disable a textarea.

<zn-textarea label="Disabled textarea" disabled value="This textarea cannot be edited"></zn-textarea>

Readonly

Use the readonly attribute to make a textarea read-only. Unlike disabled textareas, readonly textareas can still receive focus and their values are submitted with forms.

<zn-textarea label="Readonly textarea" readonly value="This textarea is read-only but can be focused"></zn-textarea>

Required

Use the required attribute to make a textarea required for form submission.

<form class="textarea-required-form">
  <zn-textarea name="feedback" label="Feedback" required help-text="This field is required"></zn-textarea>
  <br />
  <zn-button type="submit" color="success">Submit</zn-button>
</form>

<script type="module">
  const form = document.querySelector('.textarea-required-form');

  await customElements.whenDefined('zn-button');
  await customElements.whenDefined('zn-textarea');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    alert('Form submitted successfully!');
  });
</script>

Transparent Style

Use the transparent attribute to create a transparent textarea without a visible border.

<zn-textarea label="Transparent textarea" transparent placeholder="Type here..."></zn-textarea>

Flush Style

Use the flush attribute to remove padding from the textarea container.

<zn-textarea label="Flush textarea" flush></zn-textarea>

Text Input Options

Autocapitalize

Control automatic capitalization using the autocapitalize attribute.

<zn-textarea label="Sentences" autocapitalize="sentences" placeholder="First letter of each sentence capitalized"></zn-textarea>
<br />
<zn-textarea label="Words" autocapitalize="words" placeholder="First letter of each word capitalized"></zn-textarea>
<br />
<zn-textarea label="Characters" autocapitalize="characters" placeholder="All letters capitalized"></zn-textarea>

Spellcheck

Control spell checking with the spellcheck attribute. It’s enabled by default.

<zn-textarea label="Spellcheck enabled (default)" spellcheck="true" value="This haz a speling eror"></zn-textarea>
<br />
<zn-textarea label="Spellcheck disabled" spellcheck="false" value="This haz a speling eror"></zn-textarea>

Autocorrect

Use the autocorrect attribute to control autocorrection on mobile devices.

<zn-textarea label="With autocorrect" autocorrect="on"></zn-textarea>
<br />
<zn-textarea label="Without autocorrect" autocorrect="off"></zn-textarea>

Input Mode

Use the inputmode attribute to control the type of virtual keyboard displayed on mobile devices.

<zn-textarea label="Email" inputmode="email" placeholder="user@example.com"></zn-textarea>
<br />
<zn-textarea label="URL" inputmode="url" placeholder="https://example.com"></zn-textarea>
<br />
<zn-textarea label="Numeric" inputmode="numeric" placeholder="123456"></zn-textarea>

Enter Key Hint

Use the enterkeyhint attribute to customize the label or icon of the Enter key on virtual keyboards.

<zn-textarea label="Search" enterkeyhint="search"></zn-textarea>
<br />
<zn-textarea label="Message" enterkeyhint="send"></zn-textarea>
<br />
<zn-textarea label="Step" enterkeyhint="next"></zn-textarea>

Form Integration

Textareas can be used in forms with various form-related attributes.

<form class="textarea-form">
  <zn-textarea name="comments" label="Comments" required minlength="10"></zn-textarea>
  <br />
  <zn-button type="submit" color="success">Submit</zn-button>
  <zn-button type="reset" color="secondary">Reset</zn-button>
</form>

<script type="module">
  const form = document.querySelector('.textarea-form');

  await customElements.whenDefined('zn-button');
  await customElements.whenDefined('zn-textarea');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const data = Object.fromEntries(formData);
    alert('Form submitted!\n\n' + JSON.stringify(data, null, 2));
  });
</script>

Custom Validation

Use the setCustomValidity() method to set custom validation messages.

<form class="textarea-validation-form">
  <zn-textarea id="validation-textarea" name="review" label="Product Review" help-text="Must contain the word 'product'"></zn-textarea>
  <br />
  <zn-button type="submit" color="success">Submit</zn-button>
</form>

<script type="module">
  const form = document.querySelector('.textarea-validation-form');
  const textarea = document.getElementById('validation-textarea');

  await customElements.whenDefined('zn-button');
  await customElements.whenDefined('zn-textarea');

  textarea.addEventListener('zn-input', () => {
    if (textarea.value && !textarea.value.toLowerCase().includes('product')) {
      textarea.setCustomValidity('Your review must mention the product');
    } else {
      textarea.setCustomValidity('');
    }
  });

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    if (form.checkValidity()) {
      alert('Form submitted successfully!');
    }
  });
</script>

Character Count Display

Create a character counter using the zn-input event and maxlength attribute.

0 / 200

<div class="textarea-counter-container">
  <zn-textarea
    id="counter-textarea"
    label="Description"
    maxlength="200"
    help-text="Maximum 200 characters"
  ></zn-textarea>
  <div id="char-count" style="text-align: right; margin-top: 0.5rem; font-size: 0.875rem; color: var(--zn-color-neutral-600);">
    0 / 200
  </div>
</div>

<script type="module">
  const textarea = document.getElementById('counter-textarea');
  const counter = document.getElementById('char-count');

  await customElements.whenDefined('zn-textarea');

  textarea.addEventListener('zn-input', () => {
    const length = textarea.value.length;
    const max = textarea.maxlength;
    counter.textContent = `${length} / ${max}`;

    if (length > max * 0.9) {
      counter.style.color = 'var(--zn-color-error-600)';
    } else if (length > max * 0.75) {
      counter.style.color = 'var(--zn-color-warning-600)';
    } else {
      counter.style.color = 'var(--zn-color-neutral-600)';
    }
  });
</script>

Programmatic Control

Use methods to programmatically control the textarea.

Focus

Blur

Select All

Clear

<zn-textarea id="control-textarea" label="Controlled Textarea" value="Initial text content"></zn-textarea>
<br />
<zn-button id="focus-btn">Focus</zn-button>
<zn-button id="blur-btn">Blur</zn-button>
<zn-button id="select-btn">Select All</zn-button>
<zn-button id="clear-btn" color="error">Clear</zn-button>

<script type="module">
  const textarea = document.getElementById('control-textarea');
  const focusBtn = document.getElementById('focus-btn');
  const blurBtn = document.getElementById('blur-btn');
  const selectBtn = document.getElementById('select-btn');
  const clearBtn = document.getElementById('clear-btn');

  await customElements.whenDefined('zn-button');
  await customElements.whenDefined('zn-textarea');

  focusBtn.addEventListener('click', () => textarea.focus());
  blurBtn.addEventListener('click', () => textarea.blur());
  selectBtn.addEventListener('click', () => textarea.select());
  clearBtn.addEventListener('click', () => textarea.value = '');
</script>

Selection and Range Methods

Use setSelectionRange() and setRangeText() methods to work with text selections.

Select “brown”

Replace “fox” with “cat”

Insert at cursor

<zn-textarea id="selection-textarea" label="Text Selection Demo" value="The quick brown fox jumps over the lazy dog"></zn-textarea>
<br />
<zn-button id="select-word-btn">Select "brown"</zn-button>
<zn-button id="replace-word-btn">Replace "fox" with "cat"</zn-button>
<zn-button id="insert-text-btn">Insert at cursor</zn-button>

<script type="module">
  const textarea = document.getElementById('selection-textarea');
  const selectWordBtn = document.getElementById('select-word-btn');
  const replaceWordBtn = document.getElementById('replace-word-btn');
  const insertTextBtn = document.getElementById('insert-text-btn');

  await customElements.whenDefined('zn-button');
  await customElements.whenDefined('zn-textarea');

  selectWordBtn.addEventListener('click', () => {
    const text = textarea.value;
    const start = text.indexOf('brown');
    const end = start + 5;
    textarea.setSelectionRange(start, end);
    textarea.focus();
  });

  replaceWordBtn.addEventListener('click', () => {
    const text = textarea.value;
    const start = text.indexOf('fox');
    const end = start + 3;
    textarea.setRangeText('cat', start, end, 'select');
  });

  insertTextBtn.addEventListener('click', () => {
    textarea.setRangeText(' [INSERTED]');
    textarea.focus();
  });
</script>

Events

Listen to textarea events to respond to user interactions.

                Events will appear here…
              

<zn-textarea id="event-textarea" label="Event Demo" placeholder="Type or interact with this textarea"></zn-textarea>
<div id="event-log" style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-100); border-radius: 4px; font-family: monospace; font-size: 0.875rem; max-height: 200px; overflow-y: auto;">
  Events will appear here...
</div>

<script type="module">
  const textarea = document.getElementById('event-textarea');
  const eventLog = document.getElementById('event-log');

  await customElements.whenDefined('zn-textarea');

  function logEvent(eventName, detail = '') {
    const time = new Date().toLocaleTimeString();
    const message = `[${time}] ${eventName}${detail ? ': ' + detail : ''}`;
    eventLog.innerHTML = message + '<br>' + eventLog.innerHTML;
  }

  textarea.addEventListener('zn-focus', () => logEvent('zn-focus'));
  textarea.addEventListener('zn-blur', () => logEvent('zn-blur'));
  textarea.addEventListener('zn-input', (e) => logEvent('zn-input', `value="${e.target.value}"`));
  textarea.addEventListener('zn-change', (e) => logEvent('zn-change', `value="${e.target.value}"`));
  textarea.addEventListener('zn-invalid', () => logEvent('zn-invalid'));
</script>

Customizing Label Position

Use CSS parts to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control.

<zn-textarea class="label-on-left" label="Bio" help-text="Tell us about yourself"></zn-textarea>
<zn-textarea class="label-on-left" label="Notes" help-text="Additional notes"></zn-textarea>

<style>
  .label-on-left {
    --label-width: 3.75rem;
    --gap-width: 1rem;
  }

  .label-on-left + .label-on-left {
    margin-top: var(--zn-spacing-medium);
  }

  .label-on-left::part(form-control) {
    display: grid;
    grid: auto / var(--label-width) 1fr;
    gap: var(--zn-spacing-3x-small) var(--gap-width);
    align-items: start;
  }

  .label-on-left::part(form-control-label) {
    text-align: right;
    padding-top: var(--zn-spacing-small);
  }

  .label-on-left::part(form-control-help-text) {
    grid-column-start: 2;
  }
</style>

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag:

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.66/dist/components/textarea/textarea.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.66/dist/components/textarea/textarea.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/textarea/textarea.js';

Slots

Name	Description
`label`	The textareas label. Alternatively, you can use the `label` attribute.
`label-tooltip`	Used to add text that is displayed in a tooltip next to the label. Alternatively, you can use the `label-tooltip` attribute.
`context-note`	Used to add contextual text that is displayed above the textarea, on the right. Alternatively, you can use the `context-note` attribute.
`help-text`	Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.

Learn more about using slots.

Properties

Name	Description	Type	Default
`name`	The name of the textarea, submitted as a name/value pair with form data.	`string`	`''`
`value`	The current value of the textarea, submitted as a name/value pair with form data.	`string`	`''`
`size`	The text area’s size.	`'small' \| 'medium' \| 'large'`	`'medium'`
`label`	The textarea label. If you need to display HTML, use the `label` slot instead.	`string`	`''`
`labelTooltip` `label-tooltip`	Text that appears in a tooltip next to the label. If you need to display HTML in the tooltip, use the `label-tooltip` slot instead.	`string`	`''`
`contextNote` `context-note`	Text that appears above the textarea, on the right, to add additional context. If you need to display HTML in this text, use the `context-note` slot instead.	`string`	`''`
`helpText` `help-text`	The text area’s help text. If you need to display HTML, use the `help-text` slot instead.	`string`	`''`
`placeholder`	Placeholder text to show as a hint when the input is empty.	`string`	`''`
`rows`	The number of rows to display by default.	`number`	`4`
`resize`	Controls how the textarea can be resized.	`'none' \| 'vertical' \| 'auto'`	`'vertical'`
`disabled`	Disables the textarea.	`boolean`	`false`
`readonly`	Makes the textarea readonly.	`boolean`	`false`
`form`	By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you to place the form control outside of a form and associate it with the form that has this `id`. The form must be in the same document or shadow root for this to work.	`string`	`''`
`required`	Makes the textarea a required field.	`boolean`	`false`
`minlength`	The minimum length of input that will be considered valid.	`number`	-
`maxlength`	The maximum length of input that will be considered valid.	`number`	-
`autocapitalize`	Controls whether and how text input is automatically capitalized as it is entered by the user.	`'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters'`	-
`autocorrect`	Indicates whether the browser’s autocorrect feature is on or off.	`string`	-
`autocomplete`	Specifies what permission the browser has to provide assistance in filling out form field values. Refer to this page on MDN for available values.	`string`	-
`autofocus`	Indicates that the input should receive focus on page load.	`boolean`	-
`enterkeyhint`	Used to customize the label or icon of the Enter key on virtual keyboards.	`'enter' \| 'done' \| 'go' \| 'next' \| 'previous' \| 'search' \| 'send'`	-
`spellcheck`	Enables spell checking on the textarea.	`boolean`	`true`
`inputmode`	Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual keyboard on supportive devices.	`'none' \| 'text' \| 'decimal' \| 'numeric' \| 'tel' \| 'search' \| 'email' \| 'url'`	-
`defaultValue`	The default value of the form control. Primarily used for resetting the form control.	`string`	`''`
`validity`	Gets the validity state object	-	-
`validationMessage`	Gets the validation message	-	-
`updateComplete`	A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name	Description	Event Detail
`zn-blur`	Emitted when the control loses focus.	-
`zn-change`	Emitted when an alteration to the control’s value is committed by the user.	-
`zn-focus`	Emitted when the control gains focus.	-
`zn-input`	Emitted when the control receives input.	-
`zn-invalid`	Emitted when the form control has been checked for validity and its constraints aren’t satisfied.	-

Learn more about events.

Methods

Name	Description	Arguments
`focus()`	Sets focus on the textarea.	`options: FocusOptions`
`blur()`	Removes focus from the textarea.	-
`select()`	Selects all the text in the textarea.	-
`scrollPosition()`	Gets or sets the textarea scroll position.	`position: { top?: number; left?: number }`
`setSelectionRange()`	Sets the start and end positions of the text selection (0-based).	`selectionStart: number, selectionEnd: number, selectionDirection: 'forward' \| 'backward' \| 'none'`
`setRangeText()`	Replaces a range of text with a new string.	`replacement: string, start: number, end: number, selectMode: 'select' \| 'start' \| 'end' \| 'preserve'`
`checkValidity()`	Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid.	-
`getForm()`	Gets the associated form, if one exists.	-
`reportValidity()`	Checks for validity and shows the browser’s validation message if the control is invalid.	-
`setCustomValidity()`	Sets a custom validation message. Pass an empty string to restore validity.	`message: string`

Learn more about methods.

Parts

Name	Description
`form-control`	The form control that wraps the label, input, and help text.
`form-control-label`	The label’s wrapper.
`form-control-input`	The input’s wrapper.
`form-control-help-text`	The help text’s wrapper.
`base`	The component’s base wrapper.
`textarea`	The internal `<textarea>` control.

Learn more about customizing CSS parts.

Examples

Basic Textarea with Label

With Value

Help Text

Label with Tooltip

Label with Context Note

Placeholders

Rows

Sizes

Resize Options

Vertical Resize (Default)

Prevent Resizing

Auto-Resize

Character Limits

Disabled

Readonly

Required

Transparent Style

Flush Style

Text Input Options

Autocapitalize

Spellcheck

Autocorrect

Input Mode

Enter Key Hint

Form Integration

Custom Validation

Character Count Display

Programmatic Control

Selection and Range Methods

Events

Customizing Label Position

Importing

Slots

Properties

Events

Methods

Parts