Light Dark System

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>

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>

Label with Tooltip

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

<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. 

<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. 

<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.


Submit 
<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.


Submit Reset 
<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.


Submit 
<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>

Slash Menu Quick Insertions

Give a textarea a list of quick insertions and typing / opens a menu at the caret, in the same way the editor’s context menu works. It is built for replacement strings — merge fields such as {{BRAND_NAME}} in legal copy — but any text can be inserted.

The list can be declared as an attribute, which accepts the shorthand Label={{TOKEN}} for each entry:

This agreement is between you and {{LEGAL_ENTITY}}, trading as 
<zn-textarea
  label="Terms and conditions"
  rows="6"
  help-text="Type / to insert a replacement string"
  slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}}, Support email={{SUPPORT_EMAIL}}">
This agreement is between you and {{LEGAL_ENTITY}}, trading as
</zn-textarea>

Type / at the start of a word, keep typing to filter, then choose an item with ↑/↓ and Enter (or Tab), or by clicking it. Escape closes the menu without inserting and leaves the field focused. The trigger and the query that follows it are replaced by the item’s value.

Declaring Items With zn-slash-item

For richer entries — icons, descriptions, groups, or multi-line values — put zn-slash-item elements inside the textarea. No slot attribute is needed: items are picked up wherever they sit. An item’s text content is inserted when it has no value attribute, which keeps long clauses readable in markup.

This agreement is governed by the laws of {{JURISDICTION}}, and the parties submit to the exclusive jurisdiction of its courts. 
<zn-textarea label="Privacy policy" rows="8" help-text="Type / to insert">
  <zn-slash-item
    group="Merchant"
    icon="tag@lu"
    label="Brand name"
    description="The merchant's trading name"
    keywords="company, trading"
    value="{{BRAND_NAME}}"></zn-slash-item>
  <zn-slash-item
    group="Merchant"
    icon="mail@lu"
    label="Support email"
    value="{{SUPPORT_EMAIL}}"></zn-slash-item>
  <zn-slash-item
    group="Clauses"
    icon="scale@lu"
    label="Governing law"
    description="Full clause, inserted inline">This agreement is governed by the laws of {{JURISDICTION}}, and the parties submit to the exclusive jurisdiction of its courts.</zn-slash-item>
</zn-textarea>

Slotting The Menu Itself

Wrap the items in a zn-slash-menu on the slash-menu slot to keep the whole configuration in one place and set the panel’s own attributes — heading, max-items, placement, empty-text — in markup. The textarea uses that menu instead of building its own, so anything you style on it applies. 

<zn-textarea label="Terms and conditions" rows="7" help-text="Type / to insert">
  <zn-slash-menu slot="slash-menu" heading="Replacement strings" max-items="6" style="--slash-menu-width: 360px">
    <zn-slash-item icon="tag@lu" label="Brand name" value="{{BRAND_NAME}}"></zn-slash-item>
    <zn-slash-item icon="building@lu" label="Legal entity" value="{{LEGAL_ENTITY}}"></zn-slash-item>
    <zn-slash-item icon="scale@lu" label="Jurisdiction" value="{{JURISDICTION}}"></zn-slash-item>
    <zn-slash-item icon="mail@lu" label="Support email" value="{{SUPPORT_EMAIL}}"></zn-slash-item>
  </zn-slash-menu>
</zn-textarea>

Reusable Presets

Register a list once and reference it by name from any textarea with slash-preset. This keeps a single definition of the merge fields an application allows. 

<zn-textarea
  label="Refund policy"
  rows="5"
  slash-preset="legal"
  help-text="Type / to insert a replacement string"></zn-textarea>

<script type="module">
  import {registerSlashMenuPreset} from '/dist/zn.min.js';

  registerSlashMenuPreset('legal', [
    {label: 'Brand name', value: '{{BRAND_NAME}}', icon: 'tag@lu', group: 'Merchant'},
    {label: 'Legal entity', value: '{{LEGAL_ENTITY}}', icon: 'building@lu', group: 'Merchant'},
    {label: 'Refund window', value: '{{REFUND_DAYS}} days', icon: 'calendar@lu', group: 'Policy'},
    {label: 'Jurisdiction', value: '{{JURISDICTION}}', icon: 'scale@lu', group: 'Policy'}
  ]);
</script>

Recently Used Items

slash-recent-key remembers what was inserted here and lists those items above the rest next time, under a “Recently used” heading. The key names the place the field is used, so each keeps its own history — see zn-slash-menu for the menu’s own settings. 

<zn-textarea
  label="Refund policy"
  rows="5"
  slash-recent-key="docs-textarea-refunds"
  help-text="Type / and insert a couple — they come back to the top"
  slash-items="Brand name={{BRAND_NAME}}, Legal entity={{LEGAL_ENTITY}}, Jurisdiction={{JURISDICTION}},
               Refund window={{REFUND_DAYS}}, Support email={{SUPPORT_EMAIL}}"></zn-textarea>

Changing the Trigger

Set slash-trigger to any characters. Using {{ lets someone who already knows the token they want type it directly and get the list as they go. 

<zn-textarea
  label="Email footer"
  rows="4"
  slash-trigger="{{"
  help-text="Type {{ to insert a replacement string"
  slash-items="Brand name={{BRAND_NAME}}, Unsubscribe link={{UNSUBSCRIBE_URL}}"></zn-textarea>

Custom And Remote Items

slashItemsProvider resolves extra items each time the menu opens, so a list can come from an API. zn-slash-select is cancelable: call preventDefault() to handle an item yourself instead of inserting its value, which is how items that open a dialog or run a command are built. The trigger and query the user typed are removed either way. 

<zn-textarea id="provider-textarea" label="Notes" rows="5" help-text="Type / to insert"></zn-textarea>
<div id="provider-log" style="margin-top: 1rem; font-family: monospace; font-size: 0.875rem;"></div>

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

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

  textarea.slashItemsProvider = async (query) => {
    // In a real application this would be a fetch
    return [
      {label: 'Today', value: new Date().toLocaleDateString(), icon: 'calendar@lu'},
      {label: 'Clear the field', icon: 'trash-2@lu', action: 'clear', description: 'Handled by the page'}
    ];
  };

  textarea.addEventListener('zn-slash-select', (event) => {
    log.textContent = `zn-slash-select: ${event.detail.item.label}`;

    if (event.detail.item.action === 'clear') {
      event.preventDefault();
      textarea.value = '';
    }
  });

  textarea.addEventListener('zn-slash-insert', (event) => {
    log.textContent = `zn-slash-insert: ${event.detail.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.1.136/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.1.136/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.
slash-items <zn-slash-item> elements describing the insertions offered by the slash menu. Items are picked up wherever they sit inside the textarea, so this slot name is optional.
slash-menu A <zn-slash-menu> to use instead of the built-in one, so its heading, sizing and styling can be set in markup. Any <zn-slash-item> children of it become the menu’s items.

Learn more about using slots.

Properties

Name Description Reflects 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' -
slashItems
slash-items 		Quick insertions offered by the slash menu. Accepts a JSON array of items, or the shorthand Brand name={{BRAND_NAME}}, Support email={{SUPPORT_EMAIL}}. Can also be set as an array of SlashMenuItem objects in JavaScript. SlashMenuItem[] []
slashPreset
slash-preset 		Names of item sets registered with registerSlashMenuPreset, comma separated. string ''
slashTrigger
slash-trigger 		The characters that open the slash menu. string '/'
slashHeading
slash-heading 		The name the slash menu’s list is announced by. string 'Insert'
slashHideKeys
slash-hide-keys 		Hides the insertion keys normally shown against the slash menu’s items. boolean false
slashRecentKey
slash-recent-key 		Lists the items most recently chosen here above the rest, remembered in localStorage under this key. Share a key between the fields that should share a history; leave unset to offer no such list. string ''
slashItemsProvider Resolves additional items each time the menu opens, for lists that come from elsewhere (e.g. an API). Receives the current query and may return a promise. JavaScript only. (query: string) => SlashMenuItem[] | Promise | undefined -
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 React Event 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. -
zn-slash-select Emitted when a slash menu item is chosen. Cancelable — call preventDefault() to suppress the insertion and handle the item yourself. -
zn-slash-insert Emitted after a slash menu item’s value has been inserted. -

Learn more about events.

Methods

Name Description Arguments
resolveSlashItems() The insertions the slash menu offers, gathered from every source, in the order they were declared. search:
showSlashMenu() Opens the slash menu at the caret, inserting the trigger if it isn’t already there. -
hideSlashMenu() Closes the slash menu. -
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.
slash-menu The slash menu shown at the caret.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <zn-example>
  • <zn-icon>
  • <zn-slash-item>
  • <zn-slash-menu>