React Switch Components

Create consistent cross-browser and cross-device switch component.

Switches#

1<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault"/>
2<CFormSwitch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultChecked/>
3<CFormSwitch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled/>
4<CFormSwitch label="Disabled checked switch checkbox input" id="formSwitchCheckCheckedDisabled" defaultChecked disabled/>

Sizes#

1<CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefaultNormal"/>
2<CFormSwitch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg"/>
3<CFormSwitch size="xl" label="Extra large switch checkbox input" id="formSwitchCheckDefaultXL"/>

API#

CFormSwitch#

1import { CFormSwitch } from '@coreui/react'
2// or
3import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
idThe id global attribute defines an identifier (ID) that must be unique in the whole document.string-
invalidSet component validation state to invalid.boolean-
labelThe element represents a caption for a component.ReactNode-
sizeSize the component large or extra large. Works only with switch'lg' | 'xl'-
typeSpecifies the type of component.'checkbox' | 'radio'checkbox
validSet component validation state to valid.boolean-