
```jsx
import { CFormSwitch } from '@coreui/react'
// or
import CFormSwitch from '@coreui/react/src/components/form/CFormSwitch'
```

<div className="table-responsive table-api border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr id="cformswitch-class-name">
        <td className="text-primary fw-semibold">className<a href="#cformswitch-class-name" aria-label="CFormSwitch className permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the component.</p>
        </td>
      </tr>
      <tr id="cformswitch-id">
        <td className="text-primary fw-semibold">id<a href="#cformswitch-id" aria-label="CFormSwitch id permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The id global attribute defines an identifier (ID) that must be unique in the whole document.</p>
        </td>
      </tr>
      <tr id="cformswitch-invalid">
        <td className="text-primary fw-semibold">invalid<a href="#cformswitch-invalid" aria-label="CFormSwitch invalid permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Set component validation state to invalid.</p>
        </td>
      </tr>
      <tr id="cformswitch-label">
        <td className="text-primary fw-semibold">label<a href="#cformswitch-label" aria-label="CFormSwitch label permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`ReactNode`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>The element represents a caption for a component.</p>
        </td>
      </tr>
      <tr id="cformswitch-reverse">
        <td className="text-primary fw-semibold">reverse<a href="#cformswitch-reverse" aria-label="CFormSwitch reverse permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Put switch on the opposite side.</p>
        </td>
      </tr>
      <tr id="cformswitch-size">
        <td className="text-primary fw-semibold">size<a href="#cformswitch-size" aria-label="CFormSwitch size permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'lg'`}</code>, <code>{`'xl'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Size the component large or extra large. Works only with <code>{`switch`}</code>.</p>
        </td>
      </tr>
      <tr id="cformswitch-type">
        <td className="text-primary fw-semibold">type<a href="#cformswitch-type" aria-label="CFormSwitch type permalink" className="anchor-link after">#</a></td>
        <td><code>{`checkbox`}</code></td>
        <td><code>{`'checkbox'`}</code>, <code>{`'radio'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Specifies the type of component.</p>
        </td>
      </tr>
      <tr id="cformswitch-valid">
        <td className="text-primary fw-semibold">valid<a href="#cformswitch-valid" aria-label="CFormSwitch valid permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Set component validation state to valid.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
