Label

Etiqueta de texto para controles de formulario

Componente label que se combina bien con controles de formulario como Input y Textarea.

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";

export default function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

View Code

Instalación

bash

liminal add label

Uso

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";

export default function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

View Code

Ejemplos

Con Input

import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";

export default function Example() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

View Code

Con Checkbox

Aceptar términos y condiciones

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

export default function Example() {
  return (
    <div className="flex items-center space-x-2">
      <Checkbox id="terms" />
      <Label htmlFor="terms">Aceptar términos y condiciones</Label>
    </div>
  );
}

View Code

API

Prop	Type	Default	Description
htmlFor	string	-	ID del control de formulario que describe esta etiqueta. Úsalo para accesibilidad.