BbTextInput

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

The append position shows one thing at a time, by priority: clear button, then spinner, then the error or warning icon, then this. On a clearable or validated field it disappears exactly when the field gets interesting — put anything that must stay visible in append-outer.

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

Set it on every field in an auth or checkout flow. Search and filter boxes need autocomplete="off" just as much: they are text inputs on a page that has seen a login, so the browser offers a saved email over the results being filtered.

Sets autofocus on page load.

The replacement for the template-ref API v3 removed: there is no exposed focus() / blur() / select(), and a leftover call is undefined at runtime rather than a compile error. Use at most one per view, and reach the native <input> by id for anything more.

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

There is no clear event — the button emits null through the model, so watch the model instead. Suppressed on disabled and readonly fields, and never worth rebuilding in an append slot.

Displays the component in a compact version.

A property of a view, not of a field. Two densities in one form read as a seam.

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).

Always visible, and read before typing — the place for an instruction. hint is the one that speaks while the field has focus.

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 embed the label in the field and force the vertical layout, ignoring this silently — check defaultInputLabelMode before concluding the prop is broken.

Disables the component.

Blocks the keyboard too, so a disabled value is unreachable for someone navigating that way. Prefer readonly for derived or provisioned values.

Emits the masked value of the input.

Off by default, so the model holds the digits while the field shows the separators. Turn it on when the formatted string is the value you store — and do not strip formatting server-side that was never sent.

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.

A non-empty value implies the error state, so has-errors is only for when the message lives elsewhere. Rendered in an aria-live region and referenced first from aria-describedby, so it is announced on change and re-read on focus.

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

Sets aria-invalid and the error chrome without a message — for a field whose error is reported by a form-level summary.

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

The warning counterpart of has-errors: amber chrome, no aria-invalid. Errors win when both states are set.

Visually hides the label of the input while maintaining accessibility.

Keeps the accessible name and removes only the visible text. It is the answer for a search box that shows just a placeholder; omitting label is not the same thing and never is.

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

Shown while the field has focus, unless persistent-hint keeps it. A form where every field carries permanent text below it is a form nobody reads.

The identifier of the component.

The inputmode of the input.

Steers the mobile keyboard independently of type — how a masked code field stays type="text" and still gets a number pad.

Text content of the label of the element.

Required, and display and accessibility only: it does not set the name attribute. Hide it with hide-label rather than dropping it.

Label rendering mode.

A bare floating attribute is not a prop and never was — it falls through $attrs and does nothing. The spelling is label-mode="floating". Unset, the value comes from defaultInputLabelMode in the plugin config, so a project can float every field without touching call sites.

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. If the value must not change while an async check runs, write that guard yourself and tag requests so a stale response cannot overwrite a newer one.

The mask to be applied to the input. Please visit https://beholdr.github.io/maska/v3 for syntax examples.

A maska config, live-reactive — changing the options reformats the current value. Masks format, they do not validate: a complete-but-wrong value still needs an error.

Used by v-model.

Defines the name of the input.

Unset, the rendered <input> carries no name at all, so a native form post or a FormData read drops the value silently. label does not fill this in.

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.

Keeps the value focusable, selectable and copyable while refusing edits — the honest choice for a value the user did not set but may need to read or copy.

Sets the input as required.

Forwards to the native input for the browser's own validation. It does not produce a message: errors still owns that.

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

Type of the input. Restricted to the textual input types this component supports — use BbNumberInput for numbers and BbDatePickerInput for dates.

Narrowed in v3 to the text-like types. type="number" and type="date" no longer compile — those values move to BbNumberInput and BbDatePickerInput. There is no revealable: a password toggle is a type that changes plus a button in #append.

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.

The amber channel, for a value that is accepted and still worth a second look. Unlike errors it does not set aria-invalid, and it is suppressed entirely when the field also has errors.

string | null: an emptied field emits null, never ''. Write value ?? '' when feeding an API that insists on a string.

Fires on commit — blur or Enter — which makes it the right hook for an expensive side effect. input fires on every keystroke.

Content rendered after the text input, at the end of the field box.

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

Outside the field chrome, and the only affix position that may hold something interactive.

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 input.

Receives { text, hasErrors, hasWarnings }, so a custom label can react to the field state. Rarely needed — a required marker is what BbAsterisk and the requiredAsterisk plugin option are for.

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

Short inline text hugging the value. Affixes never take focus, so a click here lands in the input — which makes this the wrong home for a button and append-outer the right one.

Content rendered before the text input, at the start of the field box.

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

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