ba-input-textarea

The textarea component provides a form control for long-form text input

Figma

GitHub

Storybook

Live Demo

Custom error message

  <ba-input-textarea
    label="Please enter your message below"
    hint-text="Help text for the field"
    value=""
    name="name"
    auto-grow
  >
    <p slot="error">Custom error message</p>
  </ba-input-textarea>

Guidelines

For use when the user is required to input large amounts of text.

If only a small amount of text is needed such as a name, use <ba-input-text>

Accessibility

Always use the label attribute to give a meaningful label to the field.

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`autoGrow`	`auto-grow`	If `true`, the element height will increase based on the value.	`boolean \| undefined`	`false`
`hintText`	`hint-text`	Hint text to show above the input	`string \| undefined`	`undefined`
`invalid`	`invalid`	If `true`, the textarea's content is incorrect	`boolean \| undefined`	`false`
`label`(required)	`label`	A label for the input	`string`	`undefined`
`maxlength`	`maxlength`	This attribute specifies the maximum number of characters that the user can enter.	`string \| undefined`	`undefined`
`minlength`	`minlength`	This attribute specifies the minimum number of characters that the user can enter.	`string \| undefined`	`undefined`
`name`	`name`	The name of the control, which is submitted with the form data.	`string \| undefined`	`undefined`
`required`	`required`	If `true`, the user must fill in a value before submitting a form.	`boolean \| undefined`	`false`
`rows`	`rows`	The number of visible text lines for the textarea.	`number \| undefined`	`3`
`value`	`value`	The value of the textarea.	`null \| string \| undefined`	`''`

Events

Event	Description	Type
`baBlur`	Emitted when the input loses focus.	`CustomEvent<void>`
`baFocus`	Emitted when the input has focus.	`CustomEvent<void>`
`baOnInput`	Emitted when a keyboard input ocurred.	`CustomEvent<KeyboardEvent>`
`baSubmit`	Emitted when the user submits the form from within the component	`CustomEvent<void>`

Methods

`isValid() => Promise<boolean>`

An exposed method for triggering the inputs required validation

`reset() => Promise<void>`

Resets the input back to its initial value

Returns

Type: Promise<void>

Slots

Slot	Description	Permitted elements
`"error"`	Element will be rendered in the error slot	`<p>`

Parent components

ba-input-textarea can be slotted into:

Usage

Basic usage

A simple textarea input

<ba-input-textarea label="Label text" name="textarea" required></ba-input-textarea>

Help text

It is sometimes useful to add hint text.

An textarea input that has hint text

<ba-input-textarea label="Label text" name="textarea" hint-text="Custom hint text" required></ba-input-textarea>

Error messages

It is sometimes useful to add custom validation messages. For example you may wish to:

Add translations
Provide more detail and/or contextual advice
Add links to further information on the error

We do provide error messages with translations for:

required
minlength error
maxlength error

An textarea input that has custom error messages and hint text

<ba-input-textarea label="Label text" name="textarea" hint-text="Custom hint text" required>
  <p slot="error">We need to know this. <a href="#">Why we need to know</a>
  </p>
</ba-input-textarea>