Switch

Use bo-switch for a boolean setting with an optional label and description.

Usage

Email notificationsReceive project updates by email.

Enabled

<bo-switch>
  v-model="enabled"
  label="Email notifications"
  description="Receive project updates by email."
/>

Orientation and states

Use orientation="vertical" to stack the label content. required and disabled map to the control state.

Email notifications

Unavailable

<bo-switch>
  v-model="enabled"
  label="Email notifications"
  orientation="vertical"
/>

API

Prop / event / slot	Type	Default	Description
id / dataTestId	string	autogenerated	Control attributes.
modelValue	boolean	false	Checked state used by v-model.
defaultValue	boolean	false	Initial state for uncontrolled usage.
orientation	horizontal | vertical	horizontal	Label layout.
label / description	string	-	Text beside the control.
disabled / required	boolean	false	Control states.
name / value	string	-	Native form attributes.
customColor	string | BoSwitchCustomColors	-	Track, border, and text colors.
customThumbColor	string	-	Thumb color override.
role / ariaLabel / ariaLabelledBy / ariaDescribedBy	native accessibility types	switch / -	Control semantics.
update:modelValue	(value: boolean) event	-	Emitted when the checked state changes.
default	slot	-	Additional label content.