Field

Etiqueta, input, texto de ayuda y mensaje de error en un grupo accesible

Grupo de campo basado en Ark UI Field. El <Field /> de conveniencia envuelve un FieldInput de texto con helperText y errorText opcionales. Para textareas o control total, usa FieldRoot con FieldLabel, FieldTextarea, FieldHelperText y FieldErrorText.

EmailSolo lo usaremos para notificaciones de cuenta.

import { Field } from "@/components/ui/field";

export default function Example() {
  return (
    <Field
      label="Email"
      helperText="Solo lo usaremos para notificaciones de cuenta."
      inputProps={{ placeholder: "tu@ejemplo.com", type: "email" }}
    />
  );
}

View Code

Instalación

bash

liminal add field

Uso

Pasa inputProps para configurar el input nativo (tipo, placeholder, aria-invalid, name, etc.). helperText y errorText son opcionales; si coexisten, sigue tu sistema de diseño para mostrar ayuda junto a errores.

import { Field } from "@/components/ui/field";

export default function Example() {
  return (
    <Field
      label="Email"
      errorText="Introduce un email válido."
      inputProps={{
        type: "email",
        placeholder: "tu@ejemplo.com",
        "aria-invalid": true,
      }}
    />
  );
}

View Code

Ejemplos

API compuesta (textarea)

El Field de conveniencia solo envuelve FieldInput. Para un textarea, compón FieldRoot, FieldLabel, FieldTextarea, FieldHelperText y FieldErrorText.

tsx

import {
  FieldRoot,
  FieldLabel,
  FieldTextarea,
  FieldHelperText,
} from "@/components/ui/field";

export default function Example() {
  return (
    <FieldRoot>
      <FieldLabel>Bio</FieldLabel>
      <FieldTextarea placeholder="Cuéntanos sobre ti" rows={4} />
      <FieldHelperText>Máximo 500 caracteres.</FieldHelperText>
    </FieldRoot>
  );
}

API

Prop	Type	Default	Description
label	React.ReactNode	-	Contenido de la etiqueta sobre el input.
helperText	React.ReactNode	-	Texto de ayuda debajo del input.
errorText	React.ReactNode	-	Mensaje de error (estilo destructivo).
inputProps	React.ComponentProps<typeof FieldInput>	-	Props reenviadas al input de texto interno.

Field reenvía props adicionales a FieldRoot (Field.Root de Ark). Ver Ark Field.