Label

Un componente label con indicador de obligatoriedad, texto opcional y soporte para descripción.

default.tsx

1'use client';
2
3import { Input } from '@/components/ui/input';
4import { Label } from '@/components/ui/label';
5
6export function Default() {
7  return (
8    <div className="flex flex-col gap-1.5">
9      <Label htmlFor="email-demo">Email</Label>
10      <Input id="email-demo" placeholder="you@example.com" type="email" />
11    </div>
12  );
13}

Instalación

pnpm dlx nachui add label

Anatomía

1import { Label } from '@/components/ui/label';

1<Label htmlFor="email">Email</Label>

Variantes

Predeterminado (Default)

Un label asociado a un input.

default.tsx

1'use client';
2
3import { Input } from '@/components/ui/input';
4import { Label } from '@/components/ui/label';
5
6export function Default() {
7  return (
8    <div className="flex flex-col gap-1.5">
9      <Label htmlFor="email-demo">Email</Label>
10      <Input id="email-demo" placeholder="you@example.com" type="email" />
11    </div>
12  );
13}

Requerido y Opcional

Usá required para mostrar un asterisco rojo, optional para mostrar texto "(optional)", y description para texto de ayuda.

Full Name

Bio(optional)Tell us about yourself

required.tsx

1'use client';
2
3import { Input } from '@/components/ui/input';
4import { Label } from '@/components/ui/label';
5
6export function Required() {
7  return (
8    <div className="flex flex-col gap-4">
9      <div className="flex flex-col gap-1.5">
10        <Label htmlFor="name-demo" required>
11          Full Name
12        </Label>
13        <Input id="name-demo" placeholder="John Doe" />
14      </div>
15      <div className="flex flex-col gap-1.5">
16        <Label htmlFor="bio-demo" optional description="Tell us about yourself">
17          Bio
18        </Label>
19        <Input id="bio-demo" placeholder="A short bio..." />
20      </div>
21    </div>
22  );
23}

Referencia de API

Label

Prop	Tipo	Por defecto	Descripción
`required`	`boolean`	—	Muestra un indicador rojo `*` junto al texto del label.
`optional`	`boolean`	—	Muestra el texto "(optional)" junto al label.
`description`	`string`	—	Texto de ayuda mostrado debajo del label.
`htmlFor`	`string`	—	Asocia el label con un elemento del formulario.
`className`	`string`	—	Clases CSS adicionales.
`children`	`React.ReactNode`	—	El contenido del label.

AnteriorKbd SiguientePopover