Skip to content
mtrl
.
/
Components
Components
Styles
Examples
Documentation
GitHub ↗
⌘
K
Components
Styles
Documentation
GitHub ↗
Components
Overview
Actions
Button
Icon button
Button group
Split button
FAB
Extended FAB
Selection & input
Checkbox
Switch
Radio buttons
Chips
Slider
Text field
Select
Search
Date picker
Time picker
Navigation
Navigation rail
Drawer
Tabs
Menu
Top app bar
Bottom app bar
Containment
Card
List
Carousel
Divider
Dialog
Bottom sheet
Side sheet
Communication
Badge
Progress
Loading indicator
Snackbar
Tooltip
mtrl · Material Design 3
MIT license
Icons:
Material Symbols
by Google,
Apache 2.0
Type:
Roboto
by Google,
OFL 1.1
Vanilla
Web Components
React
Vue
Svelte
SolidJS
SELECTION & INPUT / SWITCH
Documentation ↗
Switch
Turn a setting on or off. Try labels, supporting text, and interactive states.
Live preview
View code
Theme
Baseline
Neutral
Vibrant
Expressive
Fidelity
Content
Monochrome
Rainbow
Fruit salad
Ocean
Forest
Spring
Sunset
Autumn
Desert
Summer
Brownbeige
Sageivory
Tealcaramel
Highcontrast
Light
Dark
Copy code
CONFIGURATION
Reset
Appearance
Icons
none
selected
both
Label position
start
end
Content
Label
Supporting text
Name
Behavior
Checked
Error
Required
Disabled
Esc