---
title: Caja de selección
---

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

Usado cuando un usuario necesita seleccionar múltiples valores entre varias opciones.

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

    export const MyComponent = () => {
      return (
        <Checkbox
          checked={true}
          indeterminate={false}
          onChange={() => console.log("onChange function fired")}
          onCheckedChange={() => console.log("onCheckedChange function fired")}
          variant="primary"
          size="small"
          shape="squared"
        />
      );
    };
    ```
  </Tab>

  <Tab title="Props">
    | Props           | Tipo     | Descripción                                                                                            |
    | --------------- | -------- | ------------------------------------------------------------------------------------------------------ |
    | marcado         | booleano | Indica si la caja de selección está marcada                                                            |
    | indeterminado   | booleano | Indica si la caja de selección está en un estado indeterminado (ni marcada ni desmarcada)              |
    | onChange        | función  | La función de devolución de llamada que desea activar cuando cambia el estado de la caja de selección  |
    | onCheckedChange | función  | La función de devolución de llamada que desea activar cuando cambia el estado `marcado`                |
    | variante        | cadena   | La variante de estilo visual de la caja. Las opciones incluyen: `primario`, `secundario` y `terciario` |
    | tamaño          | cadena   | El tamaño de la caja de selección. Tiene dos opciones: `pequeño` y `grande`                            |
    | forma           | cadena   | La forma de la caja de selección. Tiene dos opciones: `cuadrado` y `redondeado`                        |
  </Tab>
</Tabs>