Switches can be used for controlling features, settings or hardware that have a clear on/off logic.
<div class="flex-column switch-rich-example">
<label class="flex-row" for="switch-1">
<span>WiFi</span>
<div class="flexy-switch">
<input type="checkbox" class="flexy-switch__input" id="switch-1" />
<div class="flexy-switch__track"></div>
<div class="flexy-switch__thumb"></div>
</div>
</label>
<label class="flex-row" for="switch-2">
<span>Bluetooth</span>
<div class="flexy-switch">
<input type="checkbox" class="flexy-switch__input" id="switch-2" />
<div class="flexy-switch__track"></div>
<div class="flexy-switch__thumb"></div>
</div>
</label>
<label class="flex-row" for="switch-3">
<span>Location</span>
<div class="flexy-switch">
<input type="checkbox" class="flexy-switch__input" id="switch-3" />
<div class="flexy-switch__track"></div>
<div class="flexy-switch__thumb"></div>
</div>
</label>
</div>
The indicator can display the on/off icon inside the track. It is optional and
can be enabled by adding an element with the class flexy-switch__indicator
after the track element. You can customize its icon and color using the tokens
described in the customization section at the bottom of this page.
<div class="flex-column switch-rich-example">
<label class="flex-row" for="switch-9">
<span>Animation</span>
<div class="flexy-switch">
<input type="checkbox" class="flexy-switch__input" id="switch-9" />
<div class="flexy-switch__track"></div>
<div class="flexy-switch__indicator"></div>
<div class="flexy-switch__thumb"></div>
</div>
</label>
<label class="flex-row" for="switch-10">
<span>High Contrast</span>
<div class="flexy-switch">
<input type="checkbox" class="flexy-switch__input" id="switch-10" />
<div class="flexy-switch__track"></div>
<div class="flexy-switch__indicator"></div>
<div class="flexy-switch__thumb"></div>
</div>
</label>
<label class="flex-row" for="switch-11">
<span>Dark Mode</span>
<div class="flexy-switch">
<input type="checkbox" class="flexy-switch__input" id="switch-11" />
<div class="flexy-switch__track"></div>
<div class="flexy-switch__indicator"></div>
<div class="flexy-switch__thumb"></div>
</div>
</label>
</div>
In this example, horizontal line and checkmark icons are used, but you can use whatever icon you want.
<div class="flex-column switch-rich-example">
<label class="flex-row" for="switch-4">
<span>Proxy</span>
<div class="flexy-switch">
<input type="checkbox" class="flexy-switch__input" id="switch-4" />
<div class="flexy-switch__track"></div>
<div class="flexy-switch__thumb">
<span class="material-symbol flexy-switch__unselected-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="horizontal rule"><path d="M189-417q-26 0-44.5-18.5T126-480q0-26 18.5-44.5T189-543h582q26 0 44.5 18.5T834-480q0 26-18.5 44.5T771-417H189Z"/></svg>
</span>
<span class="material-symbol flexy-switch__selected-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="check"><path d="m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z"/></svg>
</span>
</div>
</div>
</label>
<label class="flex-row" for="switch-5">
<span>VPN</span>
<div class="flexy-switch">
<input type="checkbox" class="flexy-switch__input" id="switch-5" />
<div class="flexy-switch__track"></div>
<div class="flexy-switch__thumb">
<span class="material-symbol flexy-switch__unselected-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="horizontal rule"><path d="M189-417q-26 0-44.5-18.5T126-480q0-26 18.5-44.5T189-543h582q26 0 44.5 18.5T834-480q0 26-18.5 44.5T771-417H189Z"/></svg>
</span>
<span class="material-symbol flexy-switch__selected-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="check"><path d="m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z"/></svg>
</span>
</div>
</div>
</label>
</div>
To render a switch as selected by default, add the checked attribute to the <input> element.
<div class="flex-column switch-rich-example">
<label class="flex-row" for="switch-6" style="pointer-events: none;">
<span>Proxy</span>
<div class="flexy-switch">
<input
type="checkbox"
class="flexy-switch__input"
id="switch-6"
disabled
/>
<div class="flexy-switch__track"></div>
<div class="flexy-switch__indicator"></div>
<div class="flexy-switch__thumb">
<span class="material-symbol flexy-switch__unselected-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="horizontal rule"><path d="M189-417q-26 0-44.5-18.5T126-480q0-26 18.5-44.5T189-543h582q26 0 44.5 18.5T834-480q0 26-18.5 44.5T771-417H189Z"/></svg>
</span>
<span class="material-symbol flexy-switch__selected-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="check"><path d="m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z"/></svg>
</span>
</div>
</div>
</label>
<label class="flex-row" for="switch-7" style="pointer-events: none;">
<span>VPN</span>
<div class="flexy-switch">
<input
type="checkbox"
class="flexy-switch__input"
id="switch-7"
checked
disabled
/>
<div class="flexy-switch__track"></div>
<div class="flexy-switch__indicator"></div>
<div class="flexy-switch__thumb">
<span class="material-symbol flexy-switch__unselected-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="horizontal rule"><path d="M189-417q-26 0-44.5-18.5T126-480q0-26 18.5-44.5T189-543h582q26 0 44.5 18.5T834-480q0 26-18.5 44.5T771-417H189Z"/></svg>
</span>
<span class="material-symbol flexy-switch__selected-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="check"><path d="m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z"/></svg>
</span>
</div>
</div>
</label>
</div>
You can use design tokens to customize the appearance of the switch to your preferences. In this example, the switch is customized to look like a Material Design 2 switch.
<div
class="flex-column switch-rich-example"
style="
--flexy-comp-switch-track-width: 32px;
--flexy-comp-switch-track-height: 14px;
--flexy-comp-switch-selected-icon-color: var(--flexy-sys-color-on-primary);
--flexy-comp-switch-selected-thumb-color: var(--flexy-sys-color-primary);
--flexy-comp-switch-unselected-track-color: var(--flexy-sys-palette-grey-50);
"
>
<label class="flex-row" for="switch-8">
<span>Do Not Disturb</span>
<div class="flexy-switch">
<input type="checkbox" class="flexy-switch__input" id="switch-8" />
<div class="flexy-switch__track" style="opacity: 0.6;"></div>
<div class="flexy-switch__thumb">
<span class="material-symbol flexy-switch__unselected-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="horizontal rule"><path d="M189-417q-26 0-44.5-18.5T126-480q0-26 18.5-44.5T189-543h582q26 0 44.5 18.5T834-480q0 26-18.5 44.5T771-417H189Z"/></svg>
</span>
<span class="material-symbol flexy-switch__selected-icon">
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24" role="img" aria-label="check"><path d="m382-388 321-321q19-19 45-19t45 19q19 19 19 45t-19 45L427-253q-19 19-45 19t-45-19L167-423q-19-19-19-45t19-45q19-19 45-19t45 19l125 125Z"/></svg>
</span>
</div>
</div>
</label>
</div>
flexy-switchthumb-heightthumb-shadowthumb-shapethumb-widthtrack-heighttrack-shapetrack-widthicon-sizeindicator-sizefocus-ring-colorunselected-indicator-colorunselected-indicator-iconunselected-track-colorunselected-thumb-colorunselected-icon-colorselected-indicator-colorselected-indicator-iconselected-track-colorselected-thumb-colorselected-icon-colordisabled-unselected-indicator-colordisabled-unselected-track-colordisabled-unselected-thumb-colordisabled-unselected-icon-colordisabled-selected-indicator-colordisabled-selected-track-colordisabled-selected-thumb-colordisabled-selected-icon-colorLast modified: Oct 19, 2025: refactor(docs): Reorganize the folder structure of component examples (8271c2e)