Switch

The bq-switch component is a toggle switch form control.

Basic Usage

<bq-switch label="Enable notifications"></bq-switch>

Checked

<bq-switch label="Dark mode" checked></bq-switch>

Sizes

<bq-switch label="Small" size="sm"></bq-switch>
<bq-switch label="Medium" size="md"></bq-switch>
<bq-switch label="Large" size="lg"></bq-switch>

Disabled

<bq-switch label="Locked" disabled></bq-switch>
<bq-switch label="Locked on" checked disabled></bq-switch>

Properties

Property	Type	Default	Description
label	string	—	Visible label text
name	string	—	Form field name
value	string	'on'	Value submitted when the switch is on
checked	boolean	false	Whether the switch is on
disabled	boolean	false	Disables the switch
required	boolean	false	Must be on for the form to submit
hint	string	—	Helper text below the switch
size	string	'md'	sm | md | lg

Events

Event	Detail	Description
bq-change	{ checked: boolean }	Fired when the toggle state changes

CSS Parts

Part	Description
control	The switch track
input	The native checkbox input
thumb	The toggle thumb
label	Label text element

Form Participation

The component creates a hidden input proxy for native <form> submission. The proxy submits "on" when checked and is empty when unchecked.

Accessibility

• Uses a native <input type="checkbox" role="switch"> for full keyboard and screen reader support.
• The toggle state is conveyed via aria-checked.
• The label is associated with the input via a wrapping <label> element.