BbCheckbox

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

Defines the input as checked.

Overrides the model-derived display, so it is how a select-all master paints itself from its children. Passing it together with a v-model gives the box two sources of truth and checked wins: pick one. Narrowed to a plain boolean in v3: the v2 checked="false" no longer compiles, which is the loud version of a bug that used to check the box.

Compact density. Swaps --bb-label-spacing-y for --bb-label-spacing-y-compact, so tune a compact field's label gap with the -compact token, not the base one. The same meaning as on the checkbox, radio and switch groups.

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.

Always visible, unlike hint. Put durable information here, including the reason a box is disabled, which otherwise reads as a bug.

Disables the component.

Takes the box out of the tab order and out of the form post. When the value must still reach the server, you want readonly instead.

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.

A non-empty value puts the field in the error state by itself; has-errors is for the styling without a message. Referenced first from aria-describedby, so it is what a screen reader reads when the field regains focus.

Value of the input when unchecked. It handles any kind of serializable object.

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.

For dense composites where visible text already labels the box, such as a selection column in a table. It hides the label, it does not remove it: label is still required.

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

Hidden until the field has focus unless persistent-hint pins it open. Guidance for the moment of filling in; anything durable belongs in description.

The id of the native control; the label's for and the description and message ids derive from it. Generated when omitted.

Sets the input in an indeterminate state.

Visual only: it never enters the model, and the component re-applies it after a click because the native state resets on interaction. If the server needs a real tri-state value, model it explicitly.

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.

Sets the alignment of the input. Since inputs are inline block they can be aligned just as text can.

Text content of the label of the element.

Required, because it is the accessible name. It stays required when you replace the rendered text through the label slot: the slot decorates the string, it does not replace its role.

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.

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

A two-token pattern such as "x xxxxxxx" splits the width by token length, the first token sizing whichever element renders first, which reverse decides.

Used by v-model. Can be any serializable type.

Defines the name of the input.

Generated when omitted, which is fine in an SPA and not in a form that posts. Pass it whenever the value has to arrive under a known key.

Keeps the hint displayed.

Passthrough, object form: 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: description, hint, icon, label, message, root. States: checked, disabled, errors, focused, focusVisible, indeterminate, readonly, warnings.

Sets the input in a readonly state.

Not the same as disabled: it sets no native attribute, so the box stays focusable and still submits, while every change is swallowed and update:modelValue never fires. Use it for a value the user may see and must not change.

Sets the input as required.

Sets the native attribute and the marker (unless requiredAsterisk is off). Inside a BbForm it is a hint and checks nothing; the message comes from rules="required" there, from errors outside one.

Reverses the layout: in every direction the order of the label and the input is swapped from the standard arrangement.

Its meaning inverted in v3 and the compiler cannot see it. The default rendering is unchanged, but :reverse="false" from v2 becomes a bare reverse, and a v2 reverse is simply deleted.

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

Inside a BbForm, rules="required" fails until the box is ticked (an unticked box holds false, or your false-value).

Will submit "falseValue" if the input is not checked. Otherwise "trueValue" will be submitted.

An unchecked box posts nothing at all: standard HTML, and a recurring surprise on the server. This renders a hidden input carrying false-value so the field always arrives. Irrelevant in an SPA, where you bind into form state instead.

Value of the input when checked. It handles any kind of serializable object.

Checked-ness is derived by deep equality against this value, so object values match structurally rather than by reference.

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.

The name the rule messages use for {field}. A consent label is a sentence ("I agree to the terms…"), so give the message a noun such as "Terms".

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.

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.

The amber counterpart of errors, for a value that is valid but worth a second look. It does not set aria-invalid, and errors suppress it when both are set.

Carries true-value on check and false-value on uncheck, and nothing else. Never derive the state from a @click or @change handler; those are for side concerns.

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

Emitted when the checkbox checked state changes. Forwards the original DOM Event from the input.

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

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

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

Emitted for keyboard interaction 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.

Emitted on checked-state changes with the effective model value: - trueValue when checked - falseValue when unchecked

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

Replaces the default checkmark SVG inside the checkbox box. Receives the checkbox state plus the label text.

Replaces the entire box visual (border, background and checkmark), so the slot content has to communicate every state itself. When the row around it is the problem rather than the box, drop to BbBaseCheckboxIcon instead.

Replaces the default label text rendered next to the checkbox.

Receives { text, hasErrors, hasWarnings }. The whole control is one <label>, so interactive children have to be real anchors: a click on an <a> navigates, a click on anything else toggles the box.