Import
import { TextareaModule } from '@backbase/ui-ang/textarea'
Usage
Use the bb-textarea-ui component to display a textarea. The component extends the base input functionality with multi-line text support and character counting.
<!-- Basic textarea usage -->
<bb-textarea-ui
label="Message"
placeholder="Enter your message">
</bb-textarea-ui>
Inputs
|
Input |
Type |
Default |
|---|---|---|
|
autofocus |
boolean |
false |
|
cols |
number |
20 |
|
disabled |
boolean |
false |
|
id |
string |
Auto-generated |
|
inputClassName |
string |
undefined |
|
label |
string |
"" |
|
maxLength |
number |
undefined |
|
minLength |
number |
undefined |
|
placeholder |
string |
"" |
|
readonly |
boolean |
false |
|
required |
boolean |
false |
|
rows |
number |
2 |
|
showCharCounter |
boolean |
false |
|
size |
number | string |
20 |
|
wrap |
'soft' | 'hard' |
undefined |
autofocus
The autofocus input sets whether the textarea should be auto-focused when shown.
<!-- Textarea that auto-focuses on load -->
<bb-textarea-ui
[autofocus]="true"
label="Auto-focused Message">
</bb-textarea-ui>
cols
The cols input sets the number of columns to display in the textarea.
<!-- Textarea with specific column width -->
<bb-textarea-ui
[cols]="50"
label="Wide Message">
</bb-textarea-ui>
disabled
The disabled input sets whether the component is mutable or clickable.
<!-- Disabled textarea -->
<bb-textarea-ui
[disabled]="true"
label="Disabled Message">
</bb-textarea-ui>
id
The id input sets the unique identifier for the textarea element. Used to map the label to the input.
<!-- Textarea with custom ID -->
<bb-textarea-ui
id="custom-textarea-id"
label="Custom ID Message">
</bb-textarea-ui>
inputClassName
The inputClassName input sets additional CSS class names for the textarea form control.
<!-- Textarea with custom CSS class -->
<bb-textarea-ui
inputClassName="custom-textarea-class"
label="Custom Styled Message">
</bb-textarea-ui>
label
The label input sets the label text for the textarea field.
<!-- Textarea with label -->
<bb-textarea-ui label="Your Feedback"></bb-textarea-ui>
maxLength
The maxLength input sets the maximum number of characters allowed in the textarea.
<!-- Textarea with maximum length of 500 characters -->
<bb-textarea-ui
[maxLength]="500"
label="Limited Message">
</bb-textarea-ui>
minLength
The minLength input sets the minimum number of characters required for validation.
<!-- Textarea requiring at least 10 characters -->
<bb-textarea-ui
[minLength]="10"
label="Detailed Message">
</bb-textarea-ui>
placeholder
The placeholder input sets the placeholder text for the textarea.
<!-- Textarea with placeholder text -->
<bb-textarea-ui
placeholder="Enter your detailed message here..."
label="Message">
</bb-textarea-ui>
readonly
The readonly input sets whether the textarea is read-only. If true, the textarea cannot be edited.
<!-- Read-only textarea -->
<bb-textarea-ui
[readonly]="true"
label="Read-only Message"
value="This text cannot be edited">
</bb-textarea-ui>
required
The required input sets whether the textarea is required for form validation.
<!-- Required textarea -->
<bb-textarea-ui
[required]="true"
label="Required Message">
</bb-textarea-ui>
rows
The rows input sets the number of rows to display in the textarea.
<!-- Textarea with specific row height -->
<bb-textarea-ui
[rows]="5"
label="Tall Message">
</bb-textarea-ui>
showCharCounter
The showCharCounter input shows character counter based on maxLength.
<!-- Textarea with character counter -->
<bb-textarea-ui
[maxLength]="200"
[showCharCounter]="true"
label="Message with Counter">
</bb-textarea-ui>
size
The size input configures the minimum width to fit the specified number of characters.
<!-- Textarea with specific size -->
<bb-textarea-ui
[size]="30"
label="Sized Message">
</bb-textarea-ui>
wrap
The wrap input indicates how the control wraps text. Use "soft" for automatic line wrapping or "hard" for hard line breaks.
<!-- Textarea with soft wrapping -->
<bb-textarea-ui
wrap="soft"
label="Soft Wrap Message">
</bb-textarea-ui>
<!-- Textarea with hard wrapping -->
<bb-textarea-ui
wrap="hard"
label="Hard Wrap Message">
</bb-textarea-ui>
Outputs
|
Event |
Type |
Description |
|---|---|---|
|
blur |
EventEmitter<FocusEvent | void> |
Emits when the textarea loses focus |
|
focus |
EventEmitter<FocusEvent | void> |
Emits when the textarea receives focus |
Character counter
When maxLength and showCharCounter are both set, the textarea displays a character counter that shows the current character count relative to the maximum allowed.
<!-- Textarea with character counter -->
<bb-textarea-ui
label="Tweet"
placeholder="What's happening?"
[maxLength]="280"
[showCharCounter]="true">
</bb-textarea-ui>
The character counter updates in real-time as the user types and provides visual feedback about the remaining character limit.
Form integration
The textarea component implements Angular's ControlValueAccessor interface and works seamlessly with Angular forms.
<!-- Reactive form usage -->
<form [formGroup]="messageForm">
<bb-textarea-ui
formControlName="message"
label="Your Message"
[required]="true"
[maxLength]="1000"
[showCharCounter]="true">
</bb-textarea-ui>
</form>
// Component TypeScript
export class MyComponent {
messageForm = this.fb.group({
message: ['', [Validators.required, Validators.maxLength(1000)]]
});
constructor(private fb: FormBuilder) {}
}
CSS classes
The following CSS classes are automatically applied based on the component state:
|
Class |
Description |
|---|---|
|
form-control |
Applied to the textarea element for Bootstrap styling |
|
form-control-wrapper |
Applied to the wrapper div |
|
ng-invalid |
Applied when the textarea fails validation |
|
ng-touched |
Applied when the textarea has been touched |
Accessibility
This component is built with accessibility in mind. See the information below for supported behaviors and configuration options to ensure a fully accessible experience for all users.
The textarea component includes comprehensive accessibility features:
- Automatic label association using for and id attributes
- Character counter is properly associated with aria-describedby
- Form validation states are communicated through CSS classes
- Support for all standard ARIA attributes
ARIA
These inputs support WAI-ARIA compliance and are intended to improve accessibility for users relying on assistive technologies. Use them to provide meaningful semantic information for the component when additional context is needed to convey its purpose, state, or behavior.
|
Input |
Description |
Type |
|---|---|---|
|
aria-activedescendant |
Identifies the currently active element when focus is on a composite widget, combobox, textbox, group, or application |
string |
|
aria-autocomplete |
Indicates whether inputting text could trigger display of predictions of the user's intended value for a combobox, searchbox, or textbox |
string |
|
aria-controls |
Indicates which element or elements the user interface widget controls |
string |
|
aria-describedby |
References an element that contains a detailed description of the widget |
string |
|
aria-expanded |
Indicates if a control is expanded or collapsed, and whether its child elements are displayed or hidden |
string |
|
aria-invalid |
Indicates the entered value is not in a format expected by the application |
string |
|
aria-label |
Accessible label when control does not need to render a label tag |
string |
|
aria-labelledby |
References other elements on the page to define an accessible name |
string |
|
aria-owns |
Defines a visual, functional, or contextual relationship when the DOM hierarchy cannot represent the relationship |
string |
|
role |
Customizes the ARIA role for the HTML textarea element to improve accessibility |
string |