---
title: Cambiar
image: /images/user-guide/table-views/table.png
---

<Frame>
  <img src="/images/user-guide/table-views/table.png" alt="Encabezado" />
</Frame>

<Tabs>
  <Tab title="Uso">
    ```jsx
    import { Toggle } from "twenty-ui/input";

    export const MyComponent = () => {
      return (
        <Toggle
        value = {true}
        onChange = {()=>console.log('Evento onChange')}
        color="green"
        toggleSize = "medium"
        />
      );
    };
    ```
  </Tab>

  <Tab title="&#x22;Props&#x22;">
    | "Props"         | Tipo     | Descripción                                                                                                            | Predeterminado   |
    | --------------- | -------- | ---------------------------------------------------------------------------------------------------------------------- | ---------------- |
    | valor           | booleano | El estado actual del interruptor de palanca                                                                            | `falso`          |
    | "onChange"      | función  | Función de retorno que se activa cuando el estado del interruptor de palanca cambia                                    |                  |
    | color           | cadena   | Color del interruptor de palanca cuando                                                                                | es de color azul |
    | tamañoConmutado | cadena   | Tamaño del interruptor de palanca, que afecta tanto la altura como el ancho. Tiene dos opciones: `pequeño` y `mediano` | mediano          |
  </Tab>
</Tabs>