BbTextarea

Name of the icon to be added at the end of the input.

Guides to the browser as to the type of information expected in the field.

Sets autofocus on page load.

Expands the textarea to match its content.

Drops the native resize handle and grows the field to fit its content, animated through BbSmoothHeight. Combine it with rows instead of a CSS min-height: a min-height fights the growth calculation, rows feeds it.

Displays a clear button when the input has a value and is being interacted with.

Same behaviour as on BbTextInput: no clear event, the model simply goes null.

Sets the component in a compact state.

Descriptive text displayed below the label and above the input. Unlike the hint it is always visible, and it is linked to the input via aria-describedby (after any errors / warnings, before the hint).

Direction of the layout of the component. Can either be a predefined value or a pattern separated by a space like xx xxxxx.

Applies only while the resolved label mode is outside; floating and inside force the vertical layout and ignore it silently. A label beside a four-line box is what makes this component good for settings rows.

Disables the component.

Can be a string or an array of string containing the messages to display. They render in an aria-live="polite" region (announced when they appear) and, while the list is non-empty, are referenced FIRST from the control's aria-describedby, so the reason the field is invalid is re-read whenever the control regains focus.

Also the way a character counter reaches assistive tech — a suffix counter is visual only, and the textarea enforces no limit of its own.

Define if the component should be in an error state. It usually attaches a CSS class for styling purposes.

Define if the component should be in a warning state. Same chrome as errors with --bb-warn; errors take priority.

Visually hides the label of the input while maintaining accessibility.

Text box to be displayed near the input, usually to indicate instructions.

The identifier of the component.

Text content of the label of the element.

Required, and display and accessibility only — it does not set name.

Label rendering mode. 'outside' (default) sits the label above/beside the field; 'floating'/'inside' overlay it, like the other text inputs.

Works exactly as on BbTextInput, including the defaultInputLabelMode fallback. A bare floating attribute is not a prop: write label-mode="floating".

Sets the text alignment of the label.

Sets the component in a loading state, usually triggering some visual styles.

Visual only — the field stays editable during an autosave round-trip.

Used by v-model.

Defines the name of the input.

Unset, the rendered <textarea> carries no name, so a native form post drops the value silently.

Keeps the hint displayed.

String displayed when there's no data.

Name of the icon to be added at the start of the input.

Passthrough, object form: { box: '…', 'box:errors': '…' } — the same keys as the pt:* attributes without the prefix. See the pt:<part> row.

Sets the input in a readonly state.

Sets the input as required.

Reverses the layout. Applicable in every direction the order of the label and the input is swapped.

Sets the number of visible text lines for the control.

On its own, a fixed height with the native resize handle. With auto-grow, the floor the field starts at and never shrinks below.

Visual variant of the field box — the same names and tokens as the BbButton variants. Colours only: height, padding and border width are identical across variants, so a form never reflows when one changes. 'ghost' has no border in any state (errors and warnings show through the icon and the messages); every variant keeps the focus ring. Register extra names with the plugin's inputVariants option.

Warning messages to display beneath the field, in their own aria-live region and amber (--bb-text-warn). A string or array; a non-empty list implies the warning state. Errors suppress warnings when both are set. While displayed they are also referenced from the control's aria-describedby, after any errors and before the description/hint.

string | null, like every field in the family: emptied means null, never ''.

Also stopPropagation()d, so an ancestor listening across a whole form will not hear this field. Bind here, or watch the model.

Forwarded, but not bubbled: the component calls stopPropagation() on keydown, so no ancestor handler sees the key — not a form-level ⌘+Enter shortcut, not a dialog listening for Escape. Wire the action to a button.

Content rendered after the textarea, at the end of the inner container.

Content rendered after the entire textarea control, outside the input chrome.

Replaces the description text. Provided alone (no description prop) it still renders the description region and wires it into aria-describedby.

Replaces the default label text rendered above the textarea.

Inline content rendered at the start of the textarea field area, before the text.

Content rendered before the textarea, at the start of the inner container.

Content rendered before the entire textarea control, outside the input chrome.

Inline content rendered at the end of the textarea field area, after the text.

The home for a character counter: beside the value rather than below it, where it would compete with the hint.