Blips
Documentação

Checkbox

Um controle que permite ao usuário alternar entre marcado e não marcado.

Carregando…
"use client";
import { Checkbox } from "@blips/ui/components/checkbox";
import { Label } from "@blips/ui/components/label";
export default function CheckboxDemo() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Accept terms and conditions</Label>
    </div>
  );
}

Instalação

pnpm add @blips/ui

Uso

import { Checkbox } from "@blips/ui/components/checkbox"
<Checkbox />

Estado Marcado

Use defaultChecked para checkboxes não controlados, ou checked e onCheckedChange para controlar o estado.

import * as React from "react"
 
export function Example() {
  const [checked, setChecked] = React.useState(false)
 
  return <Checkbox checked={checked} onCheckedChange={setChecked} />
}

Estado Inválido

Defina aria-invalid no checkbox e data-invalid no wrapper do campo para exibir os estilos de estado inválido.

Exemplos

Desabilitado

Use a prop disabled para impedir a interação e adicione o atributo data-disabled ao componente <Field> para aplicar os estilos de desabilitado.

Carregando…
import { Checkbox } from "@blips/ui/components/checkbox";

export default function CheckboxDisabled() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms2" disabled />
      <label
        htmlFor="terms2"
        className="text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
      >
        Accept terms and conditions
      </label>
    </div>
  );
}

Referência da API

Consulte a documentação do Radix UI para mais informações.

AnteriorChartPróximoCollapsible