Textarea

Ready

A multi-line text field for longer answers, such as comments and messages, with help and error text, resizing and form support.

Storybook docs

Preview

Open in Storybook

Code

Install

npm install @fbin-web/neighborhood-core

Import

import { NbhdTextarea } from '@fbin-web/neighborhood-core';

Usage

<nbhd-textarea
  name="the-textarea"
  id="id"
  help-text="This is some help text for the textarea."
  error-text="This is an error message for the textarea."
  title="the textarea"
  label="Form Label"
  resize="vertical"
  maxlength="500"
  spellcheck="true">
</nbhd-textarea>

Install

npm install @fbin-web/neighborhood-react

Import

import { NbhdTextarea } from '@fbin-web/neighborhood-react';

Usage

import { NbhdTextarea } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdTextarea
      name="the-textarea"
      id="id"
      title="the textarea"
      label="Form Label"
      helpText="This is some help text for the textarea."
      errorText="This is an error message for the textarea."
      resize="vertical"
      maxlength={500}
      spellcheck={true}></NbhdTextarea>
  </>
);

Properties

Property	Attribute	Type	Default	Description
`surface`	`surface`	`noneprimarysecondaryinverseinverse-secondary`	`primary`	Sets the surface color treatment for the textarea.
`placeholder`	`placeholder`	`string`	—	Placeholder text displayed when the textarea is empty.
`value`	`value`	`string`	—	The current value of the textarea.
`name`	`name`	`string`	—	The form field name the textarea submits under.
`form`	`form`	`string`	—	The id of a elsewhere on the page to belong to, like a native field's `form` attribute.
`label`	`label`	`string`	—	The label text for the textarea.
`title`	`title`	`string`	—	The title attribute for the textarea.
`id`	`id`	`string`	—	The id of the textarea element.
`cssClass`	`css-class`	`string`	—	Additional CSS classes to apply to the textarea.
`ariaLabel`	`aria-label`	`string`	—	Accessible label for screen readers. Use it when the design has no visible label.
`resize`	`resize`	`noneverticalhorizontalboth`	`both`	Which directions the visitor can drag to resize the textarea.
`errorText`	`error-text`	`string`	—	Error message text to display when invalid. Defaults to "This field has an error." when empty.
`helpText`	`help-text`	`string`	—	Help text to provide additional context.
`maxlength`	`maxlength`	`number`	—	Maximum length of the textarea value.
`minlength`	`minlength`	`number`	—	Minimum length of the textarea value.
`invalid`	`invalid`	`boolean`	`false`	Shows the error state and error text. It doesn't block form submission; use `setCustomValidity()` for that.
`disabled`	`disabled`	`boolean`	`false`	Disables the textarea.
`required`	`required`	`boolean`	`false`	Marks the textarea as required.
`readonly`	`readonly`	`boolean`	`false`	Makes the textarea read-only.
`autofocus`	`autofocus`	`boolean`	`false`	Automatically focuses the textarea when the page loads.
`spellcheck`	`spellcheck`	`boolean`	`true`	Whether to enable spell checking.

Events

Name	Description	Event Detail
`nbhd-change`	Emitted as the value changes, while typing and when the textarea loses focus.	`{ value: string }`
`change`	Emitted alongside nbhd-change.	`{ value: string }`

Form methods

Form-associated: inside a it submits under its `name`, resets with the form, is disabled by a disabled

, and mirrors the native textarea’s validation (required, minlength, maxlength). Enter adds a new line rather than submitting the form. A page-level focuses it.

Name	Description
`checkValidity()`	Returns false (and fires `invalid`) if the control fails validation.
`reportValidity()`	Like checkValidity(), and shows the browser’s validation message on the control.
`setCustomValidity(message)`	Marks the control invalid with your own message; an empty string clears it.
`validity`	The ValidityState (valueMissing, tooShort, customError, …).
`validationMessage`	The message the browser would show.
`willValidate`	Whether the control takes part in form validation (false when disabled).
`associatedForm`	The the control belongs to, or null.
`focus(options)`	Moves focus to the textarea.
`blur()`	Removes focus from the textarea.
`select()`	Selects all of the textarea’s text.

Slots

Name	Description
`label`	Custom content for the textarea label. Defaults to the label property value.
`help`	Help text content displayed below the textarea when not in an invalid state.
`error`	Error message content displayed below the textarea when in an invalid state.

CSS Parts

Name	Description
`label`	The label element for the textarea.
`label-slot`	The slot element inside the label.
`label-text`	The text element that displays the label content.
`required`	The required marker (*) shown in the label when required. Hidden from assistive technology, which announces the native required state.
`field`	The wrapper div containing the textarea element.
`textarea`	The textarea element.
`text`	The wrapper div for help and error text.
`help`	The help slot element.
`error`	The error slot element.

nbhd-textarea::part(label) {
  /* your styles */
}

CSS Properties

Set these on nbhd-textarea or an ancestor to override the defaults. Token is the design token a default comes from and Value is what it resolves to in core Neighborhood; brands may override them. Properties that adapt to surface follow the light or inverse surface they sit on until you set them.

Textarea

Property	Token	Value
`--nbhd-textarea-backgroundColor`	`--nbhd-context-color-control-background`	Adapts to surface
`--nbhd-textarea-borderColor`	`--nbhd-context-color-control-border`	Adapts to surface
`--nbhd-textarea-borderRadius`	`--nbhd-border-radius-none`	`0`
`--nbhd-textarea-borderStyle`	—	`solid`
`--nbhd-textarea-borderWidth`	`--nbhd-border-width-subtle`	`1px`
`--nbhd-textarea-focus-outlineColor`	`--nbhd-context-color-focus-outline`	Adapts to surface
`--nbhd-textarea-focus-outlineOffset`	`--nbhd-space-0`	`0px`
`--nbhd-textarea-focus-outlineStyle`	`--nbhd-focus-control-outlineStyle`	`solid`
`--nbhd-textarea-focus-outlineWidth`	`--nbhd-border-width-subtle`	`1px`
`--nbhd-textarea-fontFamily`	`--nbhd-typography-body-fontFamily`	`sans-serif`
`--nbhd-textarea-fontSize`	`--nbhd-typography-body-fontSize`	`1rem`
`--nbhd-textarea-host-display`	—	`block`
`--nbhd-textarea-inlineSize`	—	`100%`
`--nbhd-textarea-lineHeight`	`--nbhd-typography-body-lineHeight`	`1.5`
`--nbhd-textarea-paddingBlock`	`--nbhd-space-2`	`8px`
`--nbhd-textarea-paddingInline`	`--nbhd-space-3`	`12px`
`--nbhd-textarea-resize`	—	`both`

Form control

Property	Token	Value
`--nbhd-formControl-display`	—	`inline`
`--nbhd-formControl-field-appearance`	—	`none`
`--nbhd-formControl-field-borderRadius`	`--nbhd-border-radius-none`	`0`
`--nbhd-formControl-field-color`	`--nbhd-context-color-control-foreground`	Adapts to surface
`--nbhd-formControl-field-display`	—	`inline-block`
`--nbhd-formControl-field-fontFamily`	`--nbhd-typography-body-fontFamily`	`sans-serif`
`--nbhd-formControl-field-fontSize`	`--nbhd-typography-body-fontSize`	`1rem`
`--nbhd-formControl-field-inlineSize`	—	`100%`
`--nbhd-formControl-field-position`	—	`relative`
`--nbhd-formControl-fontFamily`	`--nbhd-typography-body-fontFamily`	`sans-serif`
`--nbhd-formControl-host-display`	—	`block`
`--nbhd-formControl-label-color`	`--nbhd-context-color-text-primary`	Adapts to surface
`--nbhd-formControl-label-display`	—	`block`
`--nbhd-formControl-label-fontFamily`	`--nbhd-typography-label-fontFamily`	`sans-serif`
`--nbhd-formControl-label-fontSize`	`--nbhd-typography-label-fontSize`	`1rem`
`--nbhd-formControl-label-fontWeight`	`--nbhd-typography-label-fontWeight`	`600`
`--nbhd-formControl-label-letterSpacing`	—	`inherit`
`--nbhd-formControl-label-marginBlock`	`--nbhd-space-0 --nbhd-space-05`	`0px 2px`
`--nbhd-formControl-label-position`	—	`relative`
`--nbhd-formControl-label-textTransform`	—	`inherit`
`--nbhd-formControl-marginBlock`	`--nbhd-space-0`	`0px`
`--nbhd-formControl-maxInlineSize`	—	`100%`
`--nbhd-formControl-paddingBlock`	`--nbhd-space-0`	`0px`
`--nbhd-formControl-paddingInline`	`--nbhd-space-0`	`0px`
`--nbhd-formControl-position`	—	`relative`
`--nbhd-formControl-required-gap`	`--nbhd-space-05`	`2px`
`--nbhd-formControl-text-marginBlock`	`--nbhd-space-1 --nbhd-space-0`	`4px 0px`

Dependencies

Child components <nbhd-textarea> renders internally. Import them too when you tree-shake.

TextReady <nbhd-text>