---
title: Toggle
sidebar_position: 10
sidebar_custom_props:
  icon: TbToggleRight
---


import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import toggleCode from '!!raw-loader!@site/src/ui/input/components/toggleCode.js'


<Tabs>
<TabItem value="usage" label="Usage" default>

<SandpackEditor
  availableComponentPaths={['@/ui/input/components/Toggle']}
  componentCode={toggleCode} 
/>

</TabItem>

<TabItem value="props" label="Props">

<table>
  <thead>
    <tr>
      <th>Props</th>
      <th>Type</th>
      <th>Description</th>
      <th>Default</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>value</td>
      <td>boolean</td>
      <td>The current state of the toggle</td>
      <td>`false`</td>
    </tr>

    <tr>
      <td>onChange</td>
      <td>function</td>
      <td>Callback function triggered when the toggle state changes</td>
      <td></td>
    </tr>

    <tr>
      <td>color</td>
      <td>string</td>
      <td>Color of the toggle when it's in the "on" state. If not provided, it uses the theme's blue color</td>
      <td></td>
    </tr>

    <tr>
      <td>toggleSize</td>
      <td>string</td>
      <td>Size of the toggle, affecting both height and weight. Has two options: `small` and `medium`</td>
      <td>medium</td>
    </tr>

  </tbody>
</table>

</TabItem>

</Tabs>