Framework:
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// 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 | - |
On this page