Skip to main content

Toggle

The <Toggle/> is a simple wrapper for a <Checkbox/> component to show it as a toggle.

Source@matro-ui/Toggle

Import​

import { Toggle } from "matro-ui";
  • Toggle: Toggle input

Usage​

Loading...
Live Editor
 <Toggle>Toggle</Toggle>

Toggle sizes​

Pass the font-size to change the size of the Toggle. Values can be either px, em, rem or %.

Loading...
Live Editor
<Stack style={{gap: 20, alignItems: "flex-end"}}>
   <Toggle style={{fontSize: "14px"}} checked>
     Toggle
   </Toggle>
   <Toggle style={{fontSize: "16px"}} checked>
     Toggle
   </Toggle>
   <Toggle style={{fontSize: "1.2rem"}} checked>
     Toggle
   </Toggle>
 </Stack>

Toggle with custom color​

You can override the color scheme of the Toggle to any color by providing the css variable --bg.

Loading...
Live Editor
<Stack style={{gap: 20, alignItems: "flex-end"}}>
   <Toggle style={{"--bg": "red"}} checked>
     Toggle
   </Toggle>
   <Toggle style={{"--bg": "#48b07d"}} checked>
     Toggle
   </Toggle>
   <Toggle style={{"--bg": "#4848d7"}} checked>
     Toggle
   </Toggle>
</Stack>