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.

Focuses the field when it mounts (a dialog already open included), unless the user is typing in another field.

Expands the textarea to match its content. Empty, it is one BbTextInput tall (text on the same line); it never shrinks below that, or below rows.

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.

Compact density: the field uses the -compact twins of --bb-input-h, --bb-input-py and --bb-label-spacing-y, so a --bb-input-h set on the component is ignored while it is on. Size a compact field with --bb-input-h-compact (and --bb-input-py-compact).

Shows a character count at the end of the hint row: 42, or 42 / 140 with the native maxlength (which also stops input). It brightens from 90 % and takes the warning colour at the limit; screen readers hear it only when it crosses 90 % or the limit.

Text between the label and the input. Unlike the hint it is always visible; it joins the input's aria-describedby after any errors / warnings, before the hint.

Disables the component.

Error messages under the field, a string or array, in an aria-live="polite" region and first in the control's aria-describedby, so they are re-read when it regains focus.

The home for a soft character limit: leave maxlength off and say what to cut here. A suffix counter is visual only.

Keep this control out of the enclosing BbForm entirely: not submitted, not dirty, not reset, not validated. For a control that is not form data (a filter, a "show advanced" switch).

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 id of the native control; the label's for and the description and message ids derive from it. Generated when omitted.

Vertical position of the control in a side-by-side row; not inputPosition, the horizontal one. Omitted, the control's first line meets the label's.

Text content of the label of the element.

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

Vertical position of the label block in a side-by-side row; not labelPosition, the horizontal one. Omitted, the label's first line meets the control's.

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.

How label and input sit together: 'vertical', 'horizontal' (50/50), 'auto', 'label-fill', 'input-fill', a ratio like 'xx xxxxx', or a per-breakpoint map ({ default: 'vertical', md: '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.

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.

What the field emits once the user empties it (typing it empty, the clear button): 'null' emits null, 'string' emits ''. Unset, the app's formControls.textareaNullValue applies ('null' by default). Also types the update:modelValue payload: with 'string' it is string.

Keeps the hint displayed.

Text shown while the field is empty.

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.

Passthrough, attribute form: one attribute per part, pt:<part>, and per part and state, pt:<part>:<state>. Parts: box, clear, counter, description, hint, icon, input, label, message, prefix, root, spinner, suffix. States: atLimit, disabled, errors, ghost, hasValue, loading, nearLimit, outline, readonly, secondary, warnings.

Sets the input in a readonly state.

Sets the input as required. Outside a BbForm it forwards to the native textarea; inside one it only marks the field (asterisk, aria-required) and nothing enforces it: use rules="required" or the form schema.

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. With neither, the box is a fixed 150px.

vee-validate rules for this field. Only inside a BbForm.

Read only inside a BbForm; outside one they do nothing. The field checks itself when you leave it (validation-mode="balanced"), then on every keystroke while it shows an error.

The field's name in validation messages ({field}): "Email is not valid". Defaults to the label (or legend), then "This field"; never the name. Set it when the label is hidden or reads badly in a sentence (icon-only, a question). BbForm only.

When the field validates: aggressive (each change), balanced (on leave, then live while in error), lazy (on leave), submit-only, submit-live. Unset: the BbForm's validation-mode, then formControls.validationMode ('balanced'). BbForm only.

The field box's look, with BbButton's names and tokens. Colours only, so a form never reflows; 'ghost' has no border in any state, 'none' no look at all (you own hover, focus and the states). Register more with the plugin's inputVariants.

Warning messages under the field, a string or array: amber, in their own aria-live region and in the control's aria-describedby after the errors. Non-empty turns on the warning state; errors win when both are set.

string | null, like every field in the family: emptied means null, or '' with the plugin option formControls.textareaNullValue. Optional inside a BbForm, which holds the value under name.

Emitted when the native textarea loses focus. Forwards the original DOM FocusEvent.

Emitted when the native textarea fires a change event. Forwards the original DOM Event.

Emitted when the textarea receives a click interaction. Forwards the original DOM MouseEvent.

An IME composition ended. Forwards the original DOM CompositionEvent.

An IME composition started. Forwards the original DOM CompositionEvent.

Emitted when the native textarea gains focus. Forwards the original DOM FocusEvent.

Emitted on native input events from the textarea. Forwards the original DOM Event.

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

Emitted for keyboard interaction on the textarea. Forwards the original DOM KeyboardEvent.

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.

Emitted for keyboard interaction on the textarea. Forwards the original DOM KeyboardEvent.

Emitted when a pointing device button is pressed over the textarea. Forwards the original DOM MouseEvent.

Emitted when a pointing device button is released over the textarea. Forwards the original DOM MouseEvent.

Native clipboard paste. Forwards the original DOM ClipboardEvent.

Emitted when the value changes. Carries the new text, or the empty value (null-value, else the app's, null by default) when emptied.

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.