Moodinary/UI

Label

Todo campo tiene label visible. Requerido con asterisco rojo, opcional con “(opcional)”.

Nombre visible de un campo. Todo input necesita label, aunque tenga placeholder.

Instalación

shadcn
npx shadcn@latest add https://design.moodinary.com/r/label.json
import
import { Label } from "@moodinary/ui/components/label";

Ejemplos

Requerido, opcional y deshabilitado

El asterisco marca obligatorio. Los opcionales dicen (opcional).

Código
states.tsx
import { Input } from "@moodinary/ui/components/input";
import { Label } from "@moodinary/ui/components/label";

export default function LabelStates() {
	return (
		<div className="grid w-full max-w-sm gap-5">
			<div className="grid gap-2">
				<Label htmlFor="label-team">
					Nombre del equipo{" "}
					<span aria-hidden className="text-m1">
						*
					</span>
				</Label>
				<Input id="label-team" placeholder="Organización Norte" required />
			</div>
			<div className="grid gap-2">
				<Label htmlFor="label-description">
					Descripción <span className="font-normal text-ink-3">(opcional)</span>
				</Label>
				<Input id="label-description" placeholder="Equipo de operaciones" />
			</div>
			<div className="grid gap-2" data-disabled="true">
				<Label htmlFor="label-disabled">Deshabilitado</Label>
				<Input defaultValue="Lo cambia un admin" disabled id="label-disabled" />
			</div>
		</div>
	);
}

Props

Label

PropTipoDefaultDescripción
htmlForstring-ID del control asociado.
childrenReactNode-Texto del campo.
classNamestring-Clases extra.

Cuándo sí y cuándo no

Hacé
  • Conectalo con el input usando htmlFor.
  • Escribí etiquetas cortas.
  • Marcá los campos opcionales cuando sean minoría.
Evitá
  • No uses el placeholder como label.
  • No escondas el label solo por estética.
  • No marques todo como obligatorio.

Accesibilidad

  • Hacer clic en el label enfoca su control.
  • Para requeridos, usá también required en el input.