BbColorInput

When true, the color palette opens as a bottom off-canvas sheet on mobile viewports instead of a floating popover; on desktop it stays a popover. Mirrors the adaptive behaviour of BbSelect/BbDatePickerInput. When unset, falls back to the global config.adaptive.

Only the picker adapts: below config.mobileMaxWidth it opens as a bottom sheet instead of a popover, and the text field is untouched. The surface is latched when the picker opens, so a mid-open resize never swaps one for the other.

Enable the alpha channel. Shows an opacity slider and uses #RRGGBBAA hex8 format.

It widens the mask as well as the picker, which is why an incoming #RRGGBBAA value cannot be represented without it. Turn it on wherever eight-digit colours can occur, and expect every emitted value to carry the two extra digits, ff included.

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

The append position is where the swatch dot already lives, and the clear button and error icon compete for it too. Anything that must stay visible belongs in append:outer.

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

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

Emits null, which is the only value other than a complete hex this model ever holds. There is no clear event; watch the model.

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

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.

Blocks the picker dot as well as the text. For an imported or derived colour prefer readonly, which keeps the value focusable and copyable.

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 mask guarantees the shape, so "that is not a colour" is not an error this field can produce. What is left is presence (a required rule inside a BbForm) and rules that live on your server.

Show an eyedropper button to sample any color on screen. Uses the native EyeDropper API — hidden automatically on unsupported browsers.

The button renders only where the browser implements the native EyeDropper API (Chromium-based browsers, not Firefox or Safari) and is absent elsewhere, with nothing in its place. Never the only path to a colour. Called picker in v2; a leftover picker falls into $attrs and does nothing.

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 the name attribute. hide-label is how you drop it visually without losing the accessible 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 places the label above the input, floating overlays it on the field and shrinks it when a value is set, inside keeps it inside the field.

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

Worth reaching for on a settings page, where a column of colours reads better as label-then-swatch rows. As everywhere in the family it applies only while the resolved label mode is outside.

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

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 colour silently.

Props for the phone sheet (the BbOffCanvas that adaptive renders on mobile), spread over its defaults. A pt inside it styles only the sheet (passthrough guide § Inside the sheet). The sheet hides its ✕; { hideClose: false } brings it back.

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, description, hint, icon, indicator, input, label, message, panel, prefix, root, sheet, spinner, suffix, swatch. States: disabled, errors, ghost, hasValue, loading, outline, readonly, secondary, selected, warnings.

Sets the input in a readonly state.

Blocks the picker dot too, while the hex stays focusable, selectable and copyable. The honest state for a colour that was imported rather than chosen.

Sets the input as required.

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

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

Read only inside a BbForm; outside one they do nothing. Spend rules on presence and on business rules: the mask makes a format rule unable to fail.

Controls swatches display in the picker: - true — show the built-in Material-palette swatches - string[][] — show custom swatches (each inner array = a column of shades) - false / omitted — no swatches section

Each inner array is a column of shades, so ramps are designed vertically. A row-wise string[][] type-checks and renders a grid nobody can scan. Presets never restrict the value: the gradient and the text field stay available beside them.

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.

Hex only, lowercase on emit, and it moves only when the typed text is a complete colour, or null when the field is emptied. Half-typed values never reach it, and on blur the field itself reverts to the last valid colour, so a native form post matches the model.

Emitted when the native text input loses focus. Forwards the original DOM FocusEvent.

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

Emitted when the input area receives a click. 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 text input gains focus. Forwards the original DOM FocusEvent.

Emitted once the palette has finished closing.

Emitted as soon as the palette starts to close.

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

The raw DOM event, fired per keystroke on text that may not be a colour yet. Do not parse it: the model is the one that only ever holds a complete hex.

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

Emitted when a key is released on the input. Forwards the original DOM KeyboardEvent.

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

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

Native clipboard paste. Forwards the original DOM ClipboardEvent.

Emitted as soon as the palette (the popover, or the sheet on a phone) starts to open.

Emitted once the palette is open and its open transition has finished.

Emitted when the value becomes a valid hex color via typing/masking, when the field is cleared, or when the palette selects a color. Emits: - #RRGGBB (or #RRGGBBAA when alpha is enabled) for valid values - null when cleared

Fires on every drag frame while someone is inside the picker, so a live preview is free and a save on this event is not. Debounce persistence, or hang it on blur or on submit.

Content after the colour indicator button, at the end of the inner container. It replaces the suffix wrapper, so with append any suffix content is dropped. No scoped props.

Renders after the swatch dot the component draws there, and replaces the default suffix wrapper. For an action beside the field use append:outer, which nothing competes for.

Content rendered after the entire input control, outside the input chrome. This slot receives no scoped props.

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

Inline content rendered at the start of the input field area, before the typed text. This slot receives no scoped props.

Content rendered before the text input, at the start of the inner container. This slot receives no scoped props.

Content rendered before the entire input control, outside the input chrome. This slot receives no scoped props.

Inline content at the end of the field, after the typed text, inside the default append area: an append slot replaces it. No scoped props.