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

Sets autofocus on page load.

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.

Displays the component in a compact version.

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.

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

Disables the component.

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

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.

The mask guarantees the shape, so "that is not a color" is not an error this field can produce. What is left is presence — a null check on submit — 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 simply absent elsewhere, with nothing in its place. Never the only path to a color. Called picker in v2; a leftover picker falls into $attrs and does nothing.

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 the name attribute. hide-label is how you drop it visually without losing the accessible name.

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.

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

Props for the phone sheet. A pt inside it, object or colon keys, styles only that sheet. Extra props forwarded to the BbOffCanvas sheet when adaptive is active on mobile (e.g. size, persistent). Spread over the defaults: the sheet's title is the field label, it is draggable (the colour square and sliders never drag it) and it hides its ✕; pass { hideClose: false } to bring the ✕ back. A pt inside it styles ONLY the sheet, in BbOffCanvas's part words (root, header, title, description, content, footer, close; state open), object ({ pt: { header: '…' } }) or colon keys ({ 'pt:header': '…' }) alike. It merges after what this component forwards to its sheet, so it wins a conflict and drops nothing — see the passthrough guide § Inside the sheet. For this component it is the only way to style the sheet's header, title and ✕: none of its own parts reach inside the sheet.

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.

Blocks the picker dot too, while the hex stays focusable, selectable and copyable. The honest state for a color 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.

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.

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.

Hex only, lowercase on emit, and it moves only when the typed text is a complete color — or null when the field is emptied. Half-typed values never reach it, so nothing downstream needs to guard against one.

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

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 rendered after the color picker indicator button, at the end of the inner container. Mutually exclusive with suffix: the suffix slot renders inside this slot's default content, so providing append replaces the suffix rendering entirely and any suffix content is silently dropped. This slot receives 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 rendered at the end of the input field area, after the typed text. Renders inside the default append area's suffix wrapper — mutually exclusive with append: if an append slot is provided it replaces this wrapper and the suffix content is not rendered. This slot receives no scoped props.