Blips
Documentação

Label

Renderiza um rótulo acessível associado a controles.

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

export default function LabelDemo() {
  return (
    <div>
      <div className="flex items-center space-x-2">
        <Checkbox id="terms" />
        <Label htmlFor="terms">Accept terms and conditions</Label>
      </div>
    </div>
  );
}

Instalacao

pnpm add @blips/ui

Uso

import { Label } from "@blips/ui/components/label"
<Label htmlFor="email">Seu endereço de e-mail</Label>

Referência da API

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

Exemplos

Exemplo

Associa um Label a um Checkbox para criar um controle acessível.

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

export default function LabelDemo() {
  return (
    <div>
      <div className="flex items-center space-x-2">
        <Checkbox id="terms" />
        <Label htmlFor="terms">Accept terms and conditions</Label>
      </div>
    </div>
  );
}
AnteriorKbdPróximoMenubar