Input switch<mds-input-switch>Generated from @maggioli-design-system/magma@2.3.0dist/documentation.json. Encapsulation: shadow.
The first example of the Pattern page, live. Change its props below and the preview follows; Reset brings the example back as it was.
Props
sizeenumSpecifies the size for the switch toggle, it works only if attribute 'type' is set to 'switch'
typeenumSpecifies switch type: switch (default), checkbox and radio
typographyenumSpecifies the font typography of the element
variantenumSpecifies the variant for typography
autofocusautofocusbooleanSets or returns whether a checkbox should automatically get focus when the page loads
checkedcheckedbooleanSpecifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio")
disableddisabledbooleanSets or returns whether a checkbox is disabled, or not
explicitexplicitbooleanSets if the type switch mode shows explicit icons
indeterminateindeterminatebooleanSets or returns the indeterminate state of the checkbox
iconstringThe checked icon displayed
namestringSpecifies the name of an <input> element
valuestringSpecifies the value of the input element
Overview
The <mds-input-switch> web component is the binary/selectable input control of the Magma Design System. A single tag covers three native primitives - it renders as a toggle switch by default and re-renders as a native checkbox or radio depending on type, wrapping <input type="checkbox|radio"> with form association, accessibility, and iconography handled natively.
Semantic Behavior
Type-driven rendering: type selects the visual primitive. 'switch' (default) renders the sliding toggle, whose knob slides only when checked changes (by the user or by code) and is already in place on load or when shown again after being hidden; 'checkbox' and 'radio' render the corresponding native control.Form association: The host participates in a <form> natively - the form value is value while checked and enabled, nothing otherwise, and it follows every change of checked, value or disabled, by the user or by code. A form reset brings back the checked state of load, like a native input.Radio grouping: When type="radio", checking one instance, by the user or by code, unchecks the other radios with the same name in the same form (or, outside a form, in the same document or shadow root), as native radios do, so the group submits one value. A radio without a name is a group of its own.Checked / indeterminate: checked reflects selection; toggling it always clears indeterminate. The indeterminate glyph is only meaningful for checkbox.Disabled state: Blocks interaction and clears the submitted form value while disabled. A disabled <fieldset> around the component does the same, as it does a native input.Keyboard operable: The control responds to keyboard activation in addition to pointer clicks.Accessibility: The control exposes a localized accessible label (“select”/“unselect”) derived from slotted text (it/en/es/el).Change event: mdsInputSwitchChange fires with { name, checked, value } whenever the user changes the selection; setting checked from code does not emit it.Default slot: The default slot is the visible text label rendered beside the control; when empty, the label region collapses.
Properties & Visual Configurations
type is the primary configuration: pick 'switch' for on/off settings, 'checkbox' for multi-select selections, 'radio' for mutually exclusive choices within a name group.explicit applies only to type="switch": it surfaces a check/remove glyph inside the toggle knob so the on/off state is readable without relying on color alone.size ('sm' / 'md' / 'lg') scales the toggle and is honored only when type="switch".icon overrides the default checked glyph (checkbox/radio variants); leave empty to use the type’s built-in icon set.
Other behavioral props
typography and variant style the slotted text label; they map to the shared typography ladders rather than the system tone/variant ladder defined in agents/variants.md.