Skip to content

Toggle

Alternate appearance for a toggle that simulates on/off instead of checked/unchecked.

Import

js
import { MpToggle } from '@mekari/pixel3'

Playground

API

MpToggle

Props
Events
Slots
NameTypeDefault
id
Id of toggle.
string -
name
Name of toggle.
string -
value
Value of toggle.
string -
is-checked
If true, toggle will be checked.
booleanfalse
is-disabled
If true, toggle will be disable.
booleanfalse
is-invalid
If true, toggle will be invalid.
booleanfalse
is-read-only
If true, toggle will be read only.
booleanfalse

Usage

With Description

Accessibility

WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/

  • Provide aria-label and or aria-labelledby for screen reader support.
  • When checked, checkbox has aria-checked set to true.
  • When not checked, checkbox has aria-checked set to false.
  • When partially checked, checkbox has aria-checked set to mixed.