BbSwitch

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

Defines the input as checked.

Paints the control from state you own elsewhere and wins over modelValue until you unset it, so it is display-driven or bound, never both. Narrowed to a plain boolean in v3: the v2 checked="false" no longer compiles, where it used to turn the switch on.

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 and tied to the control through aria-describedby. On a settings row it is where the consequence of flipping the switch belongs.

Disables the component.

Takes the switch out of the tab order and out of the submitted form. Say why in description; for an admin-locked setting prefer readonly.

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.

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

For a switch that changes the page rather than the data, such as "Show advanced options": without it the switch joins the enclosing BbForm and lands in the submitted values.

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.

Sets the input in an indeterminate state.

Parks the thumb midway, for a master switch whose children disagree. Visual only: the model keeps its value, and the component re-asserts the state after clicks because the DOM resets it natively.

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: it is the accessible name of the switch. Do not add ARIA of your own: the control already exposes role="switch" and its state.

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

The settings row is layout="label-fill" with reverse: the label takes the free width and the switch sits on the trailing edge.

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

Defines the name of the input.

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.

The right state for a switch whose change is in flight, and for admin-locked settings. It sets no native disabled attribute, so do not target :disabled in CSS or tests; .bb-base-switch-icon--readonly is the hook.

Sets the input as required.

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 a v2 :reverse="false" becomes a bare reverse, which is the label-first settings row, so most switches that set it are affected.

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

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

Only for classic form posts: an unchecked switch otherwise submits nothing. The full value contract is shared with BbCheckbox.

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

Point it and false-value at the two members of an enum and the model stops needing a translation layer on either side of the request.

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.

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.

Carries the mapped true-value / false-value. Use :model-value with @update:model-value instead of v-model when a failed save has to put the previous value back.

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

Emitted when the switch 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 switch 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

The hook for a live switch that saves itself: write optimistically here, hold the control readonly while the request is in progress, and restore the previous value on failure.

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

Replaces the default toggle track visual inside the switch. Receives the switch state plus the label text.

Replaces the entire track and thumb, not a glyph inside them: a bare icon here leaves no track at all. Keep it when only the visual is wrong; when the whole row is wrong, drop to BbBaseSwitchIcon.

Replaces the default label text rendered next to the switch.