UI MarCom
3.1.0
Latest 2.4.0 2.3.0 2.2.1
UI MarCom
Getting Started
About UI MarCom Develop Design
Fundamentals
Overview Colors Elevation Icons Image Aspect Ratios Interaction Responsive Behavior Spacing States Typography
Components
Component status Overview Accordion Alerts Application Bar Aspect Ratio Back to top Breadcrumbs Button Card Slider Cards Carousel Checkboxes Collection Country and Language Selector Date-Time-Picker Disclaimer Dropdown Eyecatcher Feedback Module Figure Footer Header Hero Block Hotspots Label Links Lists Loading Animation Log In Dialog Logo Media Object Menu Modal Dialog Multi-column Navigation bar Overlay Pagination Progress Quotation Radio Buttons Search Field Search Results Select Box Stage Steps Bar Table Tabs Tags Textfield Toggle Switch Tooltip User Identifier
Updates
Component Library Changelog Design Files Changelog
Help
Contact us

Toggle Switch Stable

A Toggle Switch is similar to a Checkbox for managing settings, for example, in forms or filters. They are used for on/off selection.

Usage Code
    <uimc-toggle-switch>
</uimc-toggle-switch>

    AttributeDescriptionValuesDefault
    sizeChoose the appearance size of the elementnormal, largenormal
    checkedReflects the current state of the switch––
    SlotSlotted content
    defaultInner text is shown as label

    Toggle Switch w/o label

    <uimc-toggle-switch>
</uimc-toggle-switch>

    Toggle Switch w/ label

    Label
    <uimc-toggle-switch>
  Label
</uimc-toggle-switch>

    Large Toggle Switch

    Label
    <uimc-toggle-switch size="large">
  Label
</uimc-toggle-switch>