> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Caixa de Seleção

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/tasks/tasks_header.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=4c4e26ebbb9b40e541a945a9cda7c28a" alt="Cabeçalho" width="1440" height="680" data-path="images/user-guide/tasks/tasks_header.png" />
</Frame>

Usado quando um usuário precisa selecionar vários valores entre várias opções.

<Tabs>
  <Tab title="Uso">
    ```jsx theme={null}
    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="Propriedades">
    | Propriedades    | Tipo     | Descrição                                                                                        |
    | --------------- | -------- | ------------------------------------------------------------------------------------------------ |
    | marcado         | booleano | Indica se a caixa de seleção está selecionada                                                    |
    | indeterminado   | booleano | Indica se a caixa de seleção está em um estado indeterminado (nem selecionada nem desmarcada)    |
    | onChange        | função   | A função de retorno de chamada que você deseja acionar quando o estado da caixa de seleção mudar |
    | onCheckedChange | função   | A função de retorno de chamada que você deseja acionar quando o estado `selecionado` mudar       |
    | variante        | string   | A variante do estilo visual da caixa. As opções incluem: `primária`, `secundária` e `terciária`  |
    | tamanho         | string   | O tamanho da caixa de seleção. Tem duas opções: `pequena` e `grande`                             |
    | forma           | string   | A forma da caixa de seleção. Tem duas opções: `quadrada` e `arredondada`                         |
  </Tab>
</Tabs>