Negocios

Checkbox

Componente de seleção binária para formulários. Suporta estado marcado, desmarcado, indeterminado e desabilitado.

Visão geral

O Checkbox é um input de seleção que aceita estado checked, unchecked e indeterminate.

Estados básicos

Import

import { Checkbox } from "@/components/ui/checkbox"

Uso com label

Sempre associe um label via htmlFor ou envolva o Checkbox e label em um label pai para acessibilidade correta.

Lista de seleção

Padrão comum para listas de opções com checkboxes.

Notificações

Lista de checkboxes

<div className="flex flex-col gap-3">
  <div className="flex items-center gap-3">
    <Checkbox id="email" defaultChecked />
    <label htmlFor="email" className="text-sm cursor-pointer">
      E-mail
    </label>
  </div>
  <div className="flex items-center gap-3">
    <Checkbox id="sms" />
    <label htmlFor="sms" className="text-sm cursor-pointer">
      SMS
    </label>
  </div>
</div>

Controlled

Uso controlado com estado React para integração em formulários.

Checkbox controlado

"use client"
import { useState } from "react"
import { Checkbox } from "@/components/ui/checkbox"

export function CheckboxDemo() {
  const [checked, setChecked] = useState(false)

  return (
    <div className="flex items-center gap-3">
      <Checkbox
        id="termos"
        checked={checked}
        onCheckedChange={(value) => setChecked(Boolean(value))}
      />
      <label htmlFor="termos" className="text-sm cursor-pointer">
        Aceito os termos de uso
      </label>
    </div>
  )
}

Com React Hook Form

<FormField
  control={form.control}
  name="aceito"
  render={({ field }) => (
    <FormItem className="flex items-center gap-3">
      <FormControl>
        <Checkbox
          checked={field.value}
          onCheckedChange={field.onChange}
        />
      </FormControl>
      <FormLabel>Aceito os termos</FormLabel>
    </FormItem>
  )}
/>

Props e uso

API do Checkbox disponível no projeto.

Props principais

checked

boolean | 'indeterminate'

Estado controlado. Use com onCheckedChange para formulários.

defaultChecked

boolean

Estado inicial não-controlado.

onCheckedChange

(checked: boolean | 'indeterminate') => void

Callback chamado ao mudar o estado.

disabled

boolean

Desabilita a interação.

id

string

Necessário para associar com label via htmlFor.

Acessibilidade

O componente renderiza um button com role="checkbox" e aria-checked gerenciados automaticamente.

Sempre associe um label via htmlFor para que leitores de tela anunciem o propósito do checkbox.

Foco visível e navegação por teclado (Space para toggle) estão incluídos.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter