Components / Controls

Toggle & Switch

On/off controls for settings, filters, and selections.

Toggle — Intents

Single toggle with semantic intent colors.

Button Group

Joined buttons sharing borders.

Toggle Group — Single

Radio-style selection — one active at a time.

Switch

Animated toggle switch. Checked state uses success color.

Small
Medium — On
Large
Disabled

MayaToggle Props API

Prop / EventTypeDefaultDescription
modelValueBooleanfalseThe pressed state of the toggle. Used with v-model.
sizeString"md"The size of the toggle. Options: "sm", "md", "lg".
intentString"default"The semantic color intent. Options: "default", "success", "warning", "danger", "info".
disabledBooleanfalseWhether the toggle is disabled.
@update:modelValueEventEmitted when the toggle is pressed.
#defaultSlotContent of the toggle button.

MayaSwitch Props API

Prop / EventTypeDefaultDescription
modelValueBooleanfalseThe checked state of the switch. Used with v-model.
sizeString"md"The size of the switch. Options: "sm", "md", "lg".
disabledBooleanfalseWhether the switch is disabled.
@update:modelValueEventEmitted when the switch is toggled.