ba-input-textarea
The textarea component provides a form control for long-form text input
Custom error message
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>
Always use the label attribute to give a meaningful label to the field.
Further reading:
Disabled form elements are not supported in BAgel because they create accessibility challenges, such as preventing keyboard navigation, confusing screen reader users, and reducing visual clarity for those with impairments
Further reading:
Placeholders on inputs are not supported in BAgel because they create accessibility challenges, such as failing to provide persistent labels for screen readers, reducing color contrast for users with visual impairments, and causing confusion for those with cognitive difficulties.
If you would like to add a infomations to help the user fill the input, you can use the hint-text attribute.
Further reading:
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 textareas 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. | number | undefined |
undefined |
minlength
|
minlength |
This attribute specifies the minimum number of characters that the user can enter. | number | 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. | 3 | 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:
<ba‑accordion><ba‑card><ba‑card‑segmented><ba‑details><ba‑flex><ba‑form><ba‑form‑group><ba‑form‑group‑dropdown><ba‑grid>
Usage
Basic usage
<ba-input-textarea label="Label text" name="textarea" required></ba-input-textarea>
Help text
It is sometimes useful to add 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
<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>