---
title: React Bootstrap Switch Component
name: Switch with Bootstrap Styling
description: Learn how to create responsive toggle switches using CoreUI’s React component styled to match Bootstrap form elements.
route: /forms/switch/
bootstrap_component: true
---

## How to use React Bootstrap Switch component

Use CoreUI’s `<CFormSwitch>` to create cross-browser, Bootstrap-styled toggle switches that represent binary states such as on/off, enabled/disabled, or true/false.

### Basic usage

A standard switch uses the `type="switch"` option on the `<CFormSwitch>` component.

<ExampleSnippet className="theme-bootstrap" component="FormSwitchExample" componentName="React Bootstrap Switch" />

### Sizing

Use the `size` prop to adjust the visual scale of the switch. Available sizes include `"lg"` and `"xl"`.

<ExampleSnippet className="theme-bootstrap" component="FormSwitchSizingExample" componentName="React Bootstrap Switch" />

### Reverse layout

Add the `reverse` prop to place the switch control after the label.

<ExampleSnippet className="theme-bootstrap" component="FormSwitchReverseExample" componentName="React Bootstrap Switch" />

## API reference

Refer to the API documentation below for a complete list of available props for the React Bootstrap Switch component.

- [&lt;CFormSwitch /&gt;](../api/#cformswitch)
