Componentes

Checkbox

Seleção booleana ou múltipla em listas.

Campos e formulários

Carregando demonstração…

Código da demo
"use client";

import * as React from "react";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

export function Demo() {
  const [checked, setChecked] = React.useState(true);

  return (
    <div className="flex flex-col gap-fe-3">
      <div className="flex items-center gap-fe-2">
        <Checkbox
          id="terms"
          checked={checked}
          onCheckedChange={(v) => setChecked(v === true)}
        />
        <Label htmlFor="terms">Aceito os termos</Label>
      </div>
      <div className="flex items-center gap-fe-2">
        <Checkbox id="disabled" disabled />
        <Label htmlFor="disabled">Desabilitado</Label>
      </div>
    </div>
  );
}

Use

  • Uma ou várias opções independentes, com rótulo clicável.
  • Estado indeterminado só para grupo parcialmente marcado.

Não use

  • Não use para ligar e desligar na hora: use Switch.
  • Escolha única entre poucas opções: use RadioGroup.
Acessibilidade
Associe Label; estado checked/indeterminate anunciado.
Importar
import { Checkbox } from "@financeequity/ui/checkbox"

Neste repositório:

import { Checkbox } from "@/components/ui/checkbox"
Dependências
radix-ui