React Switch Components

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

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and Vue components. To learn more please visit the following pages.

About#

React Switch Components are a type of UI component that allows users to toggle between two states, usually represented as "on" or "off", "enabled" or "disabled", or "checked" or "unchecked".

When a user interacts with the component by clicking or tapping on it, the switch toggles its state, triggering an action or changing the appearance of the component. This type of component is often used in forms, settings panels, and other places where users need to turn something on or off or choose between two options.

Example#

Default switch checkbox input

Checked switch checkbox input

Disabled switch checkbox input

Disabled checked switch checkbox input

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

Sizing#

Larger or smaller react switches? Add size="lg" or size="xl" for additional sizes.

Default switch checkbox input

Large switch checkbox input

Extra large switch checkbox input

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

Reverse#

Put your switches on the opposite side by adding reverse boolean property.

Reverse switch

Disabled reverse switch

<CFormSwitch reverse type="radio" id="reverseFormSwitch1" label="Reverse switch"/>
<CFormSwitch reverse type="radio" id="reverseFormSwitch2" label="Disabled reverse switch" disabled/>

Customizing#

SASS variables#

$form-switch-color:               rgba($black, .25) !default;
$form-switch-width:               2em !default;
$form-switch-padding-start:       $form-switch-width + .5em !default;
$form-switch-bg-image:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
$form-switch-border-radius:       $form-switch-width !default;
$form-switch-transition:          background-position .15s ease-in-out !default;

$form-switch-focus-color:         $input-focus-border-color !default;
$form-switch-focus-bg-image:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;

$form-switch-checked-color:       $component-active-color !default;
$form-switch-checked-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
$form-switch-checked-bg-position: right center !default;

$form-switch-widths: (
  lg: (
    width: 1.75em,
    height: 1.25em
  ),
  xl: (
    width: 2em,
    height: 1.5em
  )
) !default;

API#

CFormSwitch#

import { CFormSwitch } from '@coreui/react'
// or
import 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`	-
reverse	Put switch on the opposite side.	`boolean`	-
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