Skip to main content

Checkbox

The <Checkbox/> component allows to select or deselect options in a form. It provides a customizable checkbox input with various options.

Source@matro-ui/checkbox

Import​

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

Usage​

Loading...
Live Editor
 <Checkbox>Checkbox</Checkbox>

Disabled Checkbox​

Loading...
Live Editor
<Stack style={{gap: 20}}>
   <Checkbox disabled>
     Checkbox
   </Checkbox>
   <Checkbox disabled checked>
     Checkbox
   </Checkbox>
 </Stack>

Checkbox sizes​

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

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

Checkbox with custom color​

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

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

Checkbox as toggle​

Pass the toggle prop to change the view of the Checkbox.

Loading...
Live Editor
<Stack style={{gap: 20, alignItems: "flex-end"}}>
   <Checkbox style={{fontSize: "10px"}} checked toggle>
     Checkbox
   </Checkbox>
   <Checkbox style={{fontSize: "14px"}} checked toggle>
     Checkbox
   </Checkbox>
   <Checkbox style={{fontSize: "1.6rem", "--bg": "#48b07d"}} checked toggle>
     Checkbox
   </Checkbox>
</Stack>

Toggle Component​

Alternatively, you can use the <Toggle/> component. It wraps Checkbox and pass all props to it.

Loading...
Live Editor
 <Toggle style={{fontSize: "1.1rem"}} checked toggle>
   Toggle
 </Toggle>