Switch

<bh-switch>

The Switch component represents a binary on/off state with support for labels, multiple sizes, and rich customization options.

Basic Usage

Preview

HTML

    <bh-switch></bh-switch>

Sizes

The Switch component supports three sizes:

Preview

 

HTML

    <bh-switch size="small" switchLabel="Small"></bh-switch>
    <bh-switch size="medium" switchLabel="Medium"></bh-switch>
    <bh-switch size="large" switchLabel="Large"></bh-switch>

Size	Switch Dimensions
small	50px × 25px
medium	80px × 40px
large	120px × 60px

Colors & States

Customize active/inactive switch colors and label color:

Preview

HTML

       <bh-switch
        size="medium"
        switchLabel="Switch"
        switchCheckedColor="#f9431b"
        switchDefaultColor="#322522"
        labelColor="#f9431b"
      ></bh-switch>

Checked State

You can set the switch default state as checked by setting the checked property:

Preview

HTML

     <bh-switch size="medium" switchLabel="Checked" checked></bh-switch>

Disabled State

You can disable the switch by setting the disabled property:

Preview

HTML

    <bh-switch size="medium" switchLabel="Disabled" disabled></bh-switch>

Properties

Property	Type	Description
size	string	Size of the switch: “small”, “medium”, “large”
switchLabel	string	Optional label next to the switch
switchCheckedColor	string	Background color when switch is ON
switchDefaultColor	string	Background color when switch is OFF
labelColor	string	Color of the switch label text
disabled	boolean	If true, disables interaction
checked	boolean	Initial checked state of the switch

Events

Event Name	Payload	Description
checkbox-selected	{ value, checked }	Fired when switch is toggled

---