Switch

The <Switch /> component behaves almost identically to <Checkbox /> and can be clearer indicator of settings that can be toggled.

import { Switch } from 'minerva-ui';

Switch with size variant

Switch with size and color variant

Props

These are props related to the Switch component.

NameTypeIs RequiredDefaultDescription
disabledstringoptional10pxSpace between items in stack
switchSize'sm', 'md', 'lg'optionalmdSize of switch
switchColorstringoptional#5850ecColor of inner switch when selected
checkedbooleanoptionalfalseSets if switch is selected
htmlForstringrequirednoneSets label of switch
onChangefunctionoptionalnoneAction to take when state of switch changes
stylestyle propsoptionalnoneCSS style props