Switch

A switch button with role="switch".

Basic Usage

Basic usage

Example

Disabled & Loading

disabled / loading

Example

loading shows a loading animation and prevents toggling, for async submit scenarios.

Switch Labels

checked-text / unchecked-text render labels on the switch: at medium/large/xl sizes they appear inside the track on the side opposite the thumb; at size="xs" / size="small" the labels move outside the switch.

Switch labels

Example

Sizes

size supports five tiers: xs / small / medium (default) / large / xl; invalid values fall back to medium with a warning.

Five sizes

Example

Custom Color

color overrides the primary color of the checked state (defaults to --oas-color-primary).

Custom color

Example

Events

Toggle events

Example

Listen to oas-change (detail: { checked }):

API

Attributes

Attribute	Description	Type	Default
checked	Whether on	boolean	—
checked-text	Label shown when on; inside the track at medium/large/xl, outside at xs/small	—	—
color	Custom primary color for the on state, overrides --oas-color-primary (CSS color value)	—	—
disabled	Disabled	boolean	—
loading	Loading state, prevents toggling	boolean	—
size	Size: xs / small / medium (default) / large / xl; invalid values fall back to medium with a warning	string	medium
unchecked-text	Label shown when off; inside the track at medium/large/xl, outside at xs/small	—	—

Events

Event	Description
oas-change	Toggle, detail: { checked }