Create consistent cross-browser and cross-device switch component.
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/>
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"/>
1import { CFormSwitch } from '@coreui/react'2// or3import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |
id | The id global attribute defines an identifier (ID) that must be unique in the whole document. | string | - |
invalid | Set component validation state to invalid. | boolean | - |
label | The element represents a caption for a component. | ReactNode | - |
size | Size the component large or extra large. Works only with switch | 'lg' | 'xl' | - |
type | Specifies the type of component. | 'checkbox' | 'radio' | checkbox |
valid | Set component validation state to valid. | boolean | - |