PrimitiveDisponible

Field

Composición de formularios con etiquetas, ayuda y errores.

Loading example…

Instalación

Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/field.json

Uso

Importa el componente en tu proyecto y conserva el código bajo tu control.

tsx

'use client';

import {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldGroup,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';

export default function Demo() {
  return (
    <FieldGroup className="max-w-md">
      <Field>
        <FieldLabel htmlFor="project-name">Project name</FieldLabel>
        <Input id="project-name" placeholder="My workspace" />
        <FieldDescription>Use a name your team can recognize.</FieldDescription>
      </Field>
      <Field data-invalid>
        <FieldLabel htmlFor="project-email">Contact email</FieldLabel>
        <Input
          id="project-email"
          defaultValue="invalid-email"
          aria-invalid
          aria-describedby="project-email-error"
        />
        <FieldError id="project-email-error">
          Enter a valid email address.
        </FieldError>
      </Field>
    </FieldGroup>
  );
}

Estados e interacción

Aspecto, comportamiento y comprobación con teclado.

Reposo, contenido, foco, error y deshabilitado. El error usa aria-invalid y un mensaje asociado; el color no es la única señal.
No se valida por pasar el cursor. Solo la aplicación decide cuándo mostrar errores.
Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.

Referencia API

Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.

Prop	Tipo	Default	Descripción
orientation	vertical / horizontal / responsive	vertical	Label and control arrangement.

Accesibilidad

Reglas que deben conservarse cuando el componente se adapte a un producto.

Conserva las etiquetas visibles y el HTML semántico del ejemplo.

Mantén el foco visible y comprueba la composición mediante el teclado.

Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.