Checkbox

'use client';

import { Checkbox } from '@/components/ui/checkbox';

export default function CheckboxDemo() {
  return <Checkbox name="novidades">Quero receber novidades por e-mail</Checkbox>;
}

'use client';

import { Checkbox } from '@/components/ui/checkbox';

export default function CheckboxDescription() {
  return (
    <Checkbox
      name="lgpd"
      className="max-w-sm"
      description="Seus dados serão usados apenas para retornar o contato, conforme a LGPD."
    >
      Aceito a Política de Privacidade
    </Checkbox>
  );
}

'use client';

import { Checkbox } from '@/components/ui/checkbox';

export default function CheckboxDisabled() {
  return (
    <div className="flex flex-col gap-4">
      <Checkbox isDisabled>Emitir boleto (indisponível no seu plano)</Checkbox>
      <Checkbox isDisabled defaultSelected>
        Backup diário (sempre ativo)
      </Checkbox>
    </div>
  );
}

'use client';

import { Button } from '@/components/ui/button';
import { Checkbox } from '@/components/ui/checkbox';
import { Form } from '@/components/ui/form';

export default function CheckboxInvalid() {
  return (
    <Form onSubmit={(e) => e.preventDefault()} className="max-w-sm">
      <Checkbox name="termos" isRequired errorMessage="Aceite os termos para continuar.">
        Li e aceito os Termos de Uso
      </Checkbox>
      <Button type="submit" className="self-start">
        Criar conta
      </Button>
    </Form>
  );
}

'use client';

import { Checkbox, CheckboxGroup } from '@/components/ui/checkbox';

export default function CheckboxGroupExample() {
  return (
    <div className="flex flex-col gap-8">
      <CheckboxGroup
        name="servicos"
        label="Quais serviços interessam?"
        description="Selecione quantos quiser."
        defaultValue={['site']}
      >
        <Checkbox value="site">Site institucional</Checkbox>
        <Checkbox value="loja">Loja virtual</Checkbox>
        <Checkbox value="sistema">Sistema de gestão</Checkbox>
      </CheckboxGroup>
      <CheckboxGroup
        name="dias"
        label="Dias de atendimento"
        orientation="horizontal"
        defaultValue={['seg', 'ter', 'qua', 'qui', 'sex']}
      >
        {['seg', 'ter', 'qua', 'qui', 'sex', 'sáb', 'dom'].map((dia) => (
          <Checkbox key={dia} value={dia}>
            {dia.charAt(0).toUpperCase() + dia.slice(1)}
          </Checkbox>
        ))}
      </CheckboxGroup>
    </div>
  );
}

'use client';

import { useState } from 'react';
import { Checkbox, CheckboxGroup } from '@/components/ui/checkbox';

const permissoes = [
  { id: 'agenda', label: 'Ver agenda' },
  { id: 'pacientes', label: 'Editar pacientes' },
  { id: 'financeiro', label: 'Acessar financeiro' },
];

export default function CheckboxIndeterminate() {
  const [selecionadas, setSelecionadas] = useState<string[]>(['agenda']);
  const todas = selecionadas.length === permissoes.length;
  return (
    <div className="flex flex-col gap-3">
      <Checkbox
        isSelected={todas}
        isIndeterminate={selecionadas.length > 0 && !todas}
        onChange={(marcado) => setSelecionadas(marcado ? permissoes.map((p) => p.id) : [])}
      >
        Todas as permissões
      </Checkbox>
      <CheckboxGroup aria-label="Permissões" value={selecionadas} onChange={setSelecionadas} className="pl-6">
        {permissoes.map((p) => (
          <Checkbox key={p.id} value={p.id}>
            {p.label}
          </Checkbox>
        ))}
      </CheckboxGroup>
    </div>
  );
}