Moodinary/UI

Input

Texto de una línea. Placeholder es ejemplo, nunca reemplaza al label.

Campo de una línea del dashboard sobre Base UI, de 34 px de alto. Nuevo equipo usa un nombre de hasta 80 caracteres; Meta semanal combina ayuda, validación y estado pendiente. Conserva los atributos nativos de input.

Instalación

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

Ejemplos

Normal, foco, error y deshabilitado

El label sigue visible cuando escribís. El error explica cómo corregir el valor; el campo deshabilitado muestra quién puede cambiarlo.

Entero entre 1 y 1.000.000.

Código
default.tsx
import {
	Field,
	FieldError,
	FieldHint,
	FieldLabel,
} from "@moodinary/ui/components/field";
import { Input } from "@moodinary/ui/components/input";

export default function InputDefault() {
	return (
		<div className="grid w-full max-w-xl gap-4 sm:grid-cols-2">
			<Field>
				<FieldLabel htmlFor="team-name">Nombre</FieldLabel>
				<Input id="team-name" maxLength={80} placeholder="Equipo A" required />
			</Field>
			<Field>
				<FieldLabel htmlFor="team-focus">Con foco</FieldLabel>
				<Input autoFocus defaultValue="Operaciones" id="team-focus" />
			</Field>
			<Field>
				<FieldLabel htmlFor="team-error">Nombre</FieldLabel>
				<Input aria-describedby="team-error-msg" aria-invalid id="team-error" />
				<FieldError id="team-error-msg">Ingresá un nombre.</FieldError>
			</Field>
			<Field>
				<FieldLabel htmlFor="weekly-target">Pulsos por semana</FieldLabel>
				<Input
					disabled
					id="weekly-target"
					inputMode="numeric"
					placeholder="Sin meta"
				/>
				<FieldHint>Entero entre 1 y 1.000.000.</FieldHint>
			</Field>
		</div>
	);
}

Props

Input

PropTipoDefaultDescripción
typeReact.HTMLInputTypeAttribute-Tipo nativo: text, email, number, password y otros.
value / defaultValuestring | number | readonly string[]-Valor controlado o inicial. Usá onChange al controlar el valor.
onChangeReact.ChangeEventHandler<HTMLInputElement>-Recibe el evento del campo.
disabledbooleanfalseImpide editar y excluye el valor del envío nativo.
aria-invalidboolean | "true" | "false" | "grammar" | "spelling"-Marca el campo inválido con borde rojo.
aria-describedbystring-ID de la ayuda o del mensaje de error.
classNamestring-Clases adicionales; el alto base es 34 px.

Cuándo sí y cuándo no

Hacé
  • Asociá un label con htmlFor e id.
  • Poné un ejemplo concreto en el placeholder.
  • Usá type y autoComplete acordes al dato.
Evitá
  • No reemplaces el label por el placeholder.
  • No uses Input para notas largas.
  • No marques error antes de que la persona tenga oportunidad de completar el campo.

Accesibilidad

  • Tab lleva el foco al campo; el borde y el anillo hacen visible el foco.
  • Conectá el error con aria-describedby y activá aria-invalid.
  • disabled bloquea el foco. Usá readOnly si el valor debe poder seleccionarse y copiarse.