Switch

Switches toggle the state of a single item on or off. They are the preferred way to adjust settings on mobile devices.

<x-mbc::switch aria-label="Basic switch example" />
<x-mbc::switch :on="true" aria-label="Switch on example" />

Basic Switch link

The simplest switch with no additional configuration. Switches are used to toggle settings on and off.

Notifications

Auto-save

Dark mode

Wi-Fi

<x-mbc::switch aria-label="Notifications" />
<x-mbc::switch aria-label="Auto-save" />
<x-mbc::switch aria-label="Dark mode" />
<x-mbc::switch aria-label="Wi-Fi" />

Best Practice: Always provide an aria-label or associate the switch with a visible label for accessibility.

Switch States link

Switches can be in two states: off (unselected) or on (selected). Use the :on="true" prop to set the initial state to on.

Off (Default)

On (Selected)

<!-- Switch Off (Default) -->
<x-mbc::switch aria-label="Switch off state" />

<!-- Switch On -->
<x-mbc::switch :on="true" aria-label="Switch on state" />

Use Case: Use switches for settings that take immediate effect, like enabling/disabling features or toggling options.

Switch with Icons link

Add icons to switches to provide additional visual context. Use icon for the ON state and offIcon for the OFF state.

Check/Close Icons

Icons (On State)

Single Icon (On Only)

Single Icon (On)

<!-- Switch with both icons -->
<x-mbc::switch 
    icon="check" 
    offIcon="close"
    aria-label="Toggle with icons"
/>

<!-- Switch with both icons (on state) -->
<x-mbc::switch 
    :on="true"
    icon="check" 
    offIcon="close"
    aria-label="Toggle with icons on"
/>

<!-- Switch with only ON icon -->
<x-mbc::switch 
    icon="done" 
    aria-label="Toggle with single icon"
/>

<!-- Switch with only ON icon (on state) -->
<x-mbc::switch 
    :on="true"
    icon="done" 
    aria-label="Toggle with single icon on"
/>

Tip: Icons help users understand what the switch controls. Use icons that clearly represent the on/off states.

Switch Colors link

Customize switch colors using the color prop. You can use theme colors (primary, secondary) or any custom color value.

Theme Colors:

Primary (Default)

Secondary

Custom Colors:

Success Green

Warning Orange

Error Red

Purple

<!-- Theme Colors -->
<x-mbc::switch :on="true" color="primary" aria-label="Primary color" />
<x-mbc::switch :on="true" color="secondary" aria-label="Secondary color" />

<!-- Custom Colors -->
<x-mbc::switch :on="true" color="#4CAF50" aria-label="Green switch" />
<x-mbc::switch :on="true" color="#FF9800" aria-label="Orange switch" />
<x-mbc::switch :on="true" color="#F44336" aria-label="Red switch" />
<x-mbc::switch :on="true" color="#9C27B0" aria-label="Purple switch" />

Tip: Use colors purposefully to match your brand or convey meaning (e.g., green for enable, red for critical settings).

Disabled State link

Disable switches using the disabled attribute. Disabled switches cannot be interacted with and have reduced opacity.

Disabled (Off)

Disabled (On)

Disabled with Icons (Off)

Disabled with Icons (On)

<!-- Disabled Off -->
<x-mbc::switch disabled aria-label="Disabled switch off" />

<!-- Disabled On -->
<x-mbc::switch :on="true" disabled aria-label="Disabled switch on" />

<!-- Disabled with Icons (Off) -->
<x-mbc::switch 
    icon="check" 
    offIcon="close"
    disabled 
    aria-label="Disabled switch with icons off"
/>

<!-- Disabled with Icons (On) -->
<x-mbc::switch 
    :on="true"
    icon="check" 
    offIcon="close"
    disabled 
    aria-label="Disabled switch with icons on"
/>

Use Case: Use disabled switches to show settings that are unavailable due to permissions, feature locks, or dependencies on other settings.

Properties link

mbc::switch link

Name	Type	Default	Description
`aria-label`	`string`	`recommended`	Accessibility label for the switch
`color`	`string`	`primary`	Switch color (primary, secondary, or custom color)
`disabled`	`boolean`	`false`	Whether the switch is disabled
`icon`	`string`	`null`	Icon name to display when switch is ON
`offIcon`	`string`	`null`	Icon name to display when switch is OFF
`on`	`boolean`	`false`	Whether the switch is in the on/selected state

References link

Edit this page