Field

Etiquetas, descripciones y errores conectados a su control, con estados de validación y diseños para formularios.

"use client"

import { Form } from "@base-ui/react/form"
import { IconAt } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldCounter,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldStatus,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupTextarea,
} from "@/components/ui/input-group"

export function FieldDemo() {
  return (
    <Form
      className="w-full max-w-sm"
      onSubmit={(event) => event.preventDefault()}
    >
      <FieldGroup indicator="optional">
        <Field validationMode="onBlur">
          <FieldLabel>Display name</FieldLabel>
          <Input name="name" autoComplete="name" required />
          <FieldError match="valueMissing">
            Add the name people will see.
          </FieldError>
        </Field>
        <Field validationMode="onChange">
          <FieldLabel>Handle</FieldLabel>
          <InputGroup>
            <InputGroupInput
              name="handle"
              autoComplete="username"
              pattern="[a-z0-9_]{3,15}"
              maxLength={15}
              required
            />
            <InputGroupAddon>
              <IconAt />
            </InputGroupAddon>
            <InputGroupAddon align="inline-end">
              <FieldStatus />
            </InputGroupAddon>
          </InputGroup>
          <FieldError match="valueMissing">Pick a handle.</FieldError>
          <FieldError match="patternMismatch">
            Use 3–15 lowercase letters, numbers or underscores.
          </FieldError>
        </Field>
        <Field>
          <FieldLabel>Bio</FieldLabel>
          <InputGroup>
            <InputGroupTextarea name="bio" maxLength={160} />
          </InputGroup>
          <div className="flex items-baseline justify-between gap-3">
            <FieldDescription>Shown on your profile.</FieldDescription>
            <FieldCounter />
          </div>
        </Field>
        <Button type="submit">Save profile</Button>
      </FieldGroup>
    </Form>
  )
}

Instalación

pnpm dlx shadcn@latest add https://hextaui.com/r/field.json

Añade el componente, los tokens del tema de HextaUI y los componentes de HextaUI de los que depende.

Añade los tokens del tema a tu CSS global, si aún no lo has hecho.

Instala las dependencias.

pnpm add @base-ui/react @tabler/icons-react class-variance-authority cn

Copia y pega el siguiente código en tu proyecto.

components/ui/field.tsx

"use client"

import * as React from "react"
import { Field as FieldPrimitive } from "@base-ui/react/field"
import { Fieldset as FieldsetPrimitive } from "@base-ui/react/fieldset"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { IconAlertCircle, IconCheck } from "@tabler/icons-react"

components/ui/input.tsx

"use client"

import * as React from "react"
import { Input as InputPrimitive } from "@base-ui/react/input"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import { useAutosize } from "@/hooks/use-autosize"

components/ui/number-flow.tsx

"use client"

import * as React from "react"
import { cn } from "cn"

import { easeSpring } from "@/lib/motion"

type NumberFlowTrend = "auto" | "up" | "down" | "shortest"

components/ui/separator.tsx

"use client"

import * as React from "react"
import { Separator as SeparatorPrimitive } from "@base-ui/react/separator"
import { cn } from "cn"

type SeparatorAlign = "start" | "center" | "end"

lib/motion.ts

import * as React from "react"

const easeOut = "cubic-bezier(0.23, 1, 0.32, 1)"
const easeInOut = "cubic-bezier(0.77, 0, 0.175, 1)"
const easeSpring =
  "linear(0, 0.015 2%, 0.0532 4%, 0.1065 6%, 0.1686 8%, 0.2351 10%, 0.3363 13%, 0.4332 16%, 0.5495 20%, 0.648 24%, 0.7287 28%, 0.807 33%, 0.8646 38%, 0.9128 44%, 0.9447 50%, 0.968 57%, 0.9834 65%, 0.9924 74%, 0.9975 85%, 1)"

const duration = {

Actualiza las rutas de importación para que coincidan con la configuración de tu proyecto.

Uso

import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"

<FieldGroup indicator="optional">
  <Field>
    <FieldLabel>Email</FieldLabel>
    <Input type="email" required />
    <FieldDescription>We’ll never share it.</FieldDescription>
    <FieldError />
  </Field>
</FieldGroup>

Pon cualquier control de HextaUI dentro de un <Field /> y se etiqueta, describe y valida automáticamente. No hace falta conectar id, htmlFor ni aria-describedby a mano.

Composición

Campo individual

Un control con su etiqueta, texto de ayuda y validación.

Field
├── FieldLabel
├── Input / Textarea / Select / …
├── FieldDescription
├── FieldError
├── FieldCounter
└── FieldStatus

Campo horizontal

Un switch o checkbox con su texto al lado.

Field
├── Switch / Checkbox
└── FieldContent
    ├── FieldLabel
    └── FieldDescription

Tarjeta de elección

Una etiqueta que envuelve un campo completo, de modo que la tarjeta es el objetivo del clic.

FieldLabel
└── Field
    ├── Checkbox / RadioGroupItem
    └── FieldContent
        ├── FieldTitle
        └── FieldDescription

Campos agrupados

Campos relacionados, con espaciado uniforme.

FieldGroup
├── Field
├── FieldSeparator
└── Field

Fieldsets

Un grupo de campos con título, o un grupo de radio o checkbox con un elemento por opción.

FieldSet
├── FieldLegend
├── FieldDescription
└── FieldGroup
    └── Field

FieldSet
├── FieldLegend
└── FieldItem
    ├── RadioGroupItem / Checkbox
    └── FieldLabel

Ejemplos

Input

Una etiqueta, un control y una descripción. Hacer clic en la etiqueta da foco al input, y los lectores de pantalla leen la descripción después de la etiqueta.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldInput() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Username</FieldLabel>
      <Input placeholder="ada" autoComplete="username" />
      <FieldDescription>
        Shown on your profile. You can change it once a month.
      </FieldDescription>
    </Field>
  )
}

Las restricciones nativas como required y minLength se comprueban al perder el foco. Dale a cada <FieldError /> un match para redactar el mensaje según el problema. Un campo obligatorio vacío solo se marca después de haberse editado, así que tabular más allá de él no avisa a gritos.

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

export function FieldValidation() {
  return (
    <Field validationMode="onBlur" className="max-w-sm">
      <FieldLabel>Password</FieldLabel>
      <Input
        type="password"
        autoComplete="new-password"
        required
        minLength={8}
      />
      <FieldDescription>At least 8 characters.</FieldDescription>
      <FieldError match="valueMissing">Choose a password.</FieldError>
      <FieldError match="tooShort">
        That’s too short. Use 8 or more characters.
      </FieldError>
    </Field>
  )
}

Validación personalizada

Pasa validate para comprobar cualquier cosa, incluidas búsquedas asíncronas. Devuelve un mensaje para fallar o nada para aprobar. Con validationMode="onChange" y validationDebounceTime, se ejecuta mientras escribes sin dispararse en cada tecla. Prueba con “ada”.

"use client"

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

const taken = ["admin", "ada", "hexta"]

async function checkUsername(value: unknown) {
  const name = String(value ?? "")
    .trim()
    .toLowerCase()
  if (name.length === 0) {
    return null
  }
  if (!/^[a-z0-9_]+$/.test(name)) {
    return "Use letters, numbers and underscores only."
  }
  await new Promise((resolve) => setTimeout(resolve, 400))
  return taken.includes(name) ? `“${name}” is taken.` : null
}

export function FieldCustomValidation() {
  return (
    <Field
      validationMode="onChange"
      validationDebounceTime={300}
      validate={checkUsername}
      className="max-w-sm"
    >
      <FieldLabel>Username</FieldLabel>
      <Input placeholder="Try “ada”" autoComplete="off" />
      <FieldDescription>Checked as you type.</FieldDescription>
      <FieldError />
    </Field>
  )
}

Obligatorio y opcional

Define indicator en un FieldGroup, FieldSet o Field y cada etiqueta de su interior se marca a partir del atributo required de su control. "optional" marca los campos que se pueden omitir, lo que resulta más tranquilo cuando la mayoría de los campos son obligatorios. "required" añade un asterisco. La marca está oculta para los lectores de pantalla porque el control ya lo anuncia.

import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldSeparator,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldIndicatorDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-8">
      <FieldGroup indicator="optional">
        <Field>
          <FieldLabel>Email</FieldLabel>
          <Input type="email" autoComplete="email" required />
        </Field>
        <Field>
          <FieldLabel>Company</FieldLabel>
          <Input autoComplete="organization" />
        </Field>
      </FieldGroup>
      <FieldSeparator />
      <FieldGroup indicator="required">
        <Field>
          <FieldLabel>Card number</FieldLabel>
          <Input inputMode="numeric" autoComplete="cc-number" required />
        </Field>
        <Field>
          <FieldLabel>Billing note</FieldLabel>
          <Input />
        </Field>
      </FieldGroup>
    </div>
  )
}

Estado

<FieldStatus /> dibuja una marca cuando un campo editado supera la validación, y muestra un icono de alerta mientras falla. Sigue el validationMode del campo, así que nunca juzga un campo antes de que se haya ejecutado la validación.

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
  FieldStatus,
} from "@/components/ui/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group"

export function FieldStatusDemo() {
  return (
    <Field validationMode="onChange" className="max-w-sm">
      <FieldLabel>Invite code</FieldLabel>
      <InputGroup>
        <InputGroupInput
          name="code"
          pattern="HX-[0-9]{4}"
          placeholder="HX-0000"
          autoComplete="off"
        />
        <InputGroupAddon align="inline-end">
          <FieldStatus />
        </InputGroupAddon>
      </InputGroup>
      <FieldDescription>Try HX-2026.</FieldDescription>
      <FieldError match="patternMismatch">
        Codes look like HX- followed by four digits.
      </FieldError>
    </Field>
  )
}

Contador de caracteres

<FieldCounter /> encuentra el control de texto de su campo y cuenta respecto a su maxLength. Solo escucha, así que escribir nunca se ralentiza ni se modifica.

import {
  Field,
  FieldCounter,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldCounterDemo() {
  return (
    <Field className="max-w-sm">
      <FieldLabel>Status</FieldLabel>
      <Input defaultValue="Shipping the field rework" maxLength={40} />
      <div className="flex items-baseline justify-between gap-3">
        <FieldDescription>Clears after 24 hours.</FieldDescription>
        <FieldCounter />
      </div>
    </Field>
  )
}

Errores de una librería de formularios o del servidor

Pasa invalid al campo y un array errors a <FieldError />. Acepta la forma { message } que devuelven React Hook Form y la mayoría de las librerías de esquemas. Los duplicados se descartan y varios mensajes se convierten en una lista. Cuando los mensajes cambian, los nuevos aparecen con un fundido y la altura se ajusta suavemente, así que nada de lo que hay debajo salta. Envía vacío y luego corrige una regla a la vez.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

type Errors = {
  email?: { message: string }[]
  password?: { message: string }[]
}

export function FieldErrors() {
  const [errors, setErrors] = React.useState<Errors>({})

  return (
    <form
      className="w-full max-w-sm"
      onSubmit={(event) => {
        event.preventDefault()
        const data = new FormData(event.currentTarget)
        const password = String(data.get("password") ?? "")
        const next: Errors = {}
        if (!String(data.get("email") ?? "").includes("@")) {
          next.email = [{ message: "Enter a valid email." }]
        }
        const problems = []
        if (password.length < 8) {
          problems.push({ message: "Use at least 8 characters." })
        }
        if (!/\d/.test(password)) {
          problems.push({ message: "Include a number." })
        }
        if (problems.length > 0) {
          next.password = problems
        }
        setErrors(next)
      }}
    >
      <FieldGroup>
        <Field invalid={Boolean(errors.email)}>
          <FieldLabel>Email</FieldLabel>
          <Input name="email" autoComplete="email" />
          <FieldError errors={errors.email ?? []} />
        </Field>
        <Field invalid={Boolean(errors.password)}>
          <FieldLabel>Password</FieldLabel>
          <Input name="password" type="password" autoComplete="new-password" />
          <FieldError errors={errors.password ?? []} />
        </Field>
        <Button type="submit">Sign up</Button>
      </FieldGroup>
    </form>
  )
}

Casillas de verificación

Usa orientation="horizontal" para poner el checkbox junto a su etiqueta. Dentro de un <FieldSet />, la leyenda nombra todo el grupo.

import { Checkbox, CheckboxGroup } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"

const options = [
  { value: "mentions", label: "Mentions" },
  { value: "replies", label: "Replies to my comments" },
  { value: "digest", label: "Weekly digest" },
]

export function FieldCheckbox() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend variant="label">Email me about</FieldLegend>
      <FieldDescription>Security alerts are always on.</FieldDescription>
      <CheckboxGroup defaultValue={["mentions", "replies"]}>
        {options.map((option) => (
          <Field key={option.value} orientation="horizontal">
            <Checkbox name="notifications" value={option.value} />
            <FieldLabel>{option.label}</FieldLabel>
          </Field>
        ))}
      </CheckboxGroup>
    </FieldSet>
  )
}

Tarjetas de elección

Envuelve un campo completo en <FieldLabel /> para que la tarjeta sea el objetivo del clic. Usa <FieldTitle /> dentro, ya que las etiquetas no se pueden anidar. La tarjeta se tiñe al marcarse y muestra el anillo de foco cuando su checkbox recibe foco.

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
  FieldTitle,
} from "@/components/ui/field"

export function FieldChoiceCard() {
  return (
    <FieldSet className="w-full max-w-sm">
      <FieldLegend variant="label">Add-ons</FieldLegend>
      <div className="flex flex-col gap-3">
        <FieldLabel>
          <Field orientation="horizontal">
            <Checkbox name="backups" defaultChecked />
            <FieldContent>
              <FieldTitle>Daily backups</FieldTitle>
              <FieldDescription>
                Restore any day from the last 30.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
        <FieldLabel>
          <Field orientation="horizontal">
            <Checkbox name="support" />
            <FieldContent>
              <FieldTitle>Priority support</FieldTitle>
              <FieldDescription>Replies within four hours.</FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
        <FieldLabel>
          <Field orientation="horizontal" disabled>
            <Checkbox name="sso" />
            <FieldContent>
              <FieldTitle>Single sign-on</FieldTitle>
              <FieldDescription>
                Available on the Business plan.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldLabel>
      </div>
    </FieldSet>
  )
}

Fieldset

<FieldSet /> agrupa campos relacionados bajo un <FieldLegend />, que se convierte en el nombre accesible del grupo. Coloca los campos uno al lado del otro con una cuadrícula simple.

import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldFieldset() {
  return (
    <FieldSet className="w-full max-w-md">
      <FieldLegend>Shipping address</FieldLegend>
      <FieldDescription>Where should we send your order?</FieldDescription>
      <FieldGroup>
        <Field>
          <FieldLabel>Street address</FieldLabel>
          <Input autoComplete="street-address" />
        </Field>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
          <Field>
            <FieldLabel>City</FieldLabel>
            <Input autoComplete="address-level2" />
          </Field>
          <Field>
            <FieldLabel>Postal code</FieldLabel>
            <Input autoComplete="postal-code" />
          </Field>
        </div>
      </FieldGroup>
    </FieldSet>
  )
}

Responsive

orientation="responsive" apila la etiqueta y el control en espacios estrechos y los pone lado a lado cuando el <FieldGroup /> que los rodea es lo bastante ancho. Responde al ancho del grupo, no al de la ventana.

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldResponsive() {
  return (
    <FieldGroup className="w-full max-w-xl">
      <Field orientation="responsive">
        <FieldContent>
          <FieldLabel>Display name</FieldLabel>
          <FieldDescription>Shown next to your messages.</FieldDescription>
        </FieldContent>
        <Input placeholder="Ada" className="sm:max-w-56" />
      </Field>
      <Field orientation="responsive">
        <FieldContent>
          <FieldLabel>Website</FieldLabel>
          <FieldDescription>Linked from your profile.</FieldDescription>
        </FieldContent>
        <Input placeholder="example.com" className="sm:max-w-56" />
      </Field>
    </FieldGroup>
  )
}

Deshabilitado

Deshabilitar un <FieldSet /> deshabilita todos los campos y controles de su interior. Pasa disabled a un solo <Field /> para deshabilitar únicamente ese.

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldDisabled() {
  return (
    <FieldSet disabled className="w-full max-w-sm">
      <FieldLegend>Billing details</FieldLegend>
      <FieldDescription>Managed by your organization’s admin.</FieldDescription>
      <FieldGroup>
        <Field>
          <FieldLabel>Company</FieldLabel>
          <Input defaultValue="Acme Inc." />
        </Field>
        <Field orientation="horizontal">
          <Checkbox defaultChecked />
          <FieldLabel>Send invoices by email</FieldLabel>
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}

Contenido largo

Las etiquetas, descripciones y errores se ajustan dentro de formularios estrechos, incluidas las cadenas sin espacios, y nunca ensanchan el diseño.

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

export function FieldLongContent() {
  return (
    <Field invalid className="w-72">
      <FieldLabel>
        A label long enough to wrap onto a second line in a narrow form
      </FieldLabel>
      <Input defaultValue="averyveryverylongunbrokenvaluethatkeepsgoing" />
      <FieldDescription>
        averyveryverylongunbrokendescriptionthatmustwrapinsteadofoverflowing
      </FieldDescription>
      <FieldError
        errors={[
          {
            message:
              "This message is long on purpose and wraps onto several lines without pushing anything wider.",
          },
        ]}
      />
    </Field>
  )
}

De derecha a izquierda

El texto, la posición del checkbox y las listas de errores siguen la dirección de lectura.

import { Checkbox } from "@/components/ui/checkbox"
import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldRtl() {
  return (
    <div dir="rtl" className="w-full max-w-sm">
      <FieldGroup>
        <Field invalid>
          <FieldLabel>البريد الإلكتروني</FieldLabel>
          <Input type="email" defaultValue="ada@" />
          <FieldDescription>
            سنرسل رابط التأكيد إلى هذا العنوان.
          </FieldDescription>
          <FieldError errors={[{ message: "أدخل عنوان بريد صالحًا." }]} />
        </Field>
        <Field orientation="horizontal">
          <Checkbox defaultChecked />
          <FieldLabel>تذكرني</FieldLabel>
        </Field>
      </FieldGroup>
    </div>
  )
}

Accesibilidad

La etiqueta, la descripción y los errores visibles se vinculan al control por ti, así que los lectores de pantalla anuncian los tres cuando recibe foco.
Los controles no válidos reciben aria-invalid, que también dibuja su anillo de error.
Los errores no son regiones activas. Se leen cuando el control recibe foco, así que validar al cambiar no interrumpe la escritura. Al enviar, mueve el foco al primer campo no válido.
Los errores crecen y aparecen con un fundido en su sitio en lugar de empujar el contenido hacia abajo. Con movimiento reducido, aparecen sin animación.

Referencia de la API

Construido sobre el field y el fieldset de Base UI. Cada parte acepta las props del elemento o la primitiva que renderiza.

Field

Prop	Tipo	Predeterminado
`orientation`	`"vertical" \| "horizontal" \| "responsive"`	`"vertical"`
`indicator`Marca la etiqueta a partir del atributo required del control. Se hereda de FieldGroup o FieldSet.	`"required" \| "optional" \| null`	`–`
`name`Identifica el campo cuando se envía el formulario.	`string`	`–`
`validate`Devuelve uno o más mensajes para fallar, o nada para aprobar. Se admite async.	`(value, formValues) => string \| string[] \| null \| Promise<…>`	`–`
`validationMode`	`"onSubmit" \| "onBlur" \| "onChange"`	`"onSubmit"`
`validationDebounceTime`Milisegundos de espera entre validaciones de onChange.	`number`	`0`
`invalid`Defínelo desde una librería de formularios o una respuesta del servidor.	`boolean`	`–`
`disabled`	`boolean`	`false`
`dirty`	`boolean`	`–`
`touched`	`boolean`	`–`
`actionsRef`Valida el campo de forma imperativa.	`RefObject<{ validate: () => void }>`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Atributo	Descripción
`data-slot="field"`	Selecciona los campos en CSS.
`data-orientation`	La orientación actual.
`data-disabled`	Presente cuando el campo está deshabilitado.
`data-valid`	Presente cuando el campo es válido.
`data-invalid`	Presente cuando el campo no es válido.
`data-dirty`	Presente una vez que el valor ha cambiado respecto al inicial.
`data-touched`	Presente una vez que el control ha recibido foco y lo ha perdido.
`data-filled`	Presente cuando el control tiene un valor.
`data-focused`	Presente mientras el control tiene foco.

FieldLabel

Prop	Tipo	Predeterminado
`nativeLabel`Ponlo en false cuando render cambie la etiqueta por un elemento que no sea una etiqueta.	`boolean`	`true`
`optionalText`Texto que se muestra con indicator="optional".	`ReactNode`	`"Optional"`
`render`	`ReactElement \| (props, state) => ReactElement`	`<label>`

Atributo	Descripción
`data-slot="field-label"`	Selecciona las etiquetas en CSS. Fuera de un campo renderiza una etiqueta simple, que es como funcionan las tarjetas de elección.
`data-disabled`	Presente cuando el campo está deshabilitado.
`data-valid`	Presente cuando el campo es válido.
`data-invalid`	Presente cuando el campo no es válido.
`data-dirty`	Presente una vez que el valor ha cambiado respecto al inicial.
`data-touched`	Presente una vez que el control ha recibido foco y lo ha perdido.
`data-filled`	Presente cuando el control tiene un valor.
`data-focused`	Presente mientras el control tiene foco.

FieldStatus

Un icono que refleja la validez del campo. Es decorativo, ya que el mensaje de error lleva el significado.

Atributo	Descripción
`data-slot="field-status"`	Selecciona el icono de estado en CSS.

FieldCounter

Prop	Tipo	Predeterminado
`threshold`	`number`	`10% of maxLength, at most 20`
`announcement`Mensaje para lectores de pantalla cuando el recuento cruza el umbral o llega al límite.	`(remaining: number) => string`	`–`

Atributo	Descripción
`data-slot="field-counter"`	Selecciona el contador en CSS.
`data-state="near" \| "limit"`	Presente dentro del umbral y en el límite.

FieldDescription

Prop	Tipo	Predeterminado
`render`	`ReactElement \| (props, state) => ReactElement`	`<p>`

Atributo	Descripción
`data-slot="field-description"`	Selecciona las descripciones en CSS.
`data-disabled`	Presente cuando el campo está deshabilitado.
`data-valid`	Presente cuando el campo es válido.
`data-invalid`	Presente cuando el campo no es válido.
`data-dirty`	Presente una vez que el valor ha cambiado respecto al inicial.
`data-touched`	Presente una vez que el control ha recibido foco y lo ha perdido.
`data-filled`	Presente cuando el control tiene un valor.
`data-focused`	Presente mientras el control tiene foco.

FieldError

Prop	Tipo	Predeterminado
`match`Se muestra solo para este problema de validez. true lo muestra siempre.	`boolean \| "valueMissing" \| "typeMismatch" \| "tooShort" \| "tooLong" \| "patternMismatch" \| "rangeOverflow" \| "rangeUnderflow" \| "stepMismatch" \| "badInput" \| "customError" \| "valid"`	`–`
`errors`Errores de una librería de formularios o del servidor. Se muestran cuando la lista tiene un mensaje.	`Array<{ message?: string } \| undefined>`	`–`
`children`Por defecto es el mensaje de validación.	`ReactNode`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Atributo	Descripción
`data-slot="field-error"`	Selecciona los errores en CSS.
`data-starting-style`	Presente mientras el error crece al aparecer.
`data-ending-style`	Presente mientras el error se colapsa.
`data-disabled`	Presente cuando el campo está deshabilitado.
`data-valid`	Presente cuando el campo es válido.
`data-invalid`	Presente cuando el campo no es válido.
`data-dirty`	Presente una vez que el valor ha cambiado respecto al inicial.
`data-touched`	Presente una vez que el control ha recibido foco y lo ha perdido.
`data-filled`	Presente cuando el control tiene un valor.
`data-focused`	Presente mientras el control tiene foco.

FieldContent

Apila una etiqueta, una descripción y un error junto a un control en un campo horizontal.

Prop	Tipo	Predeterminado
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

FieldTitle

Un título con estilo de etiqueta para el contenido dentro de un <FieldLabel />, como las tarjetas de elección.

Prop	Tipo	Predeterminado
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

FieldGroup

Separa los campos y es el contenedor que miden los campos responsive.

Prop	Tipo	Predeterminado
`indicator`Se aplica a todos los campos de su interior.	`"required" \| "optional" \| null`	`–`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

FieldSet

Prop	Tipo	Predeterminado
`indicator`Se aplica a todos los campos de su interior.	`"required" \| "optional" \| null`	`–`
`disabled`Deshabilita todos los campos de su interior.	`boolean`	`false`
`render`	`ReactElement \| (props, state) => ReactElement`	`<fieldset>`

Atributo	Descripción
`data-slot="field-set"`	Selecciona los fieldsets en CSS.
`data-disabled`	Presente cuando el fieldset está deshabilitado.

FieldLegend

Prop	Tipo	Predeterminado
`variant`label coincide con el tamaño de una etiqueta de campo.	`"legend" \| "label"`	`"legend"`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Atributo	Descripción
`data-slot="field-legend"`	Selecciona las leyendas en CSS.
`data-variant`	La variante actual.

FieldSeparator

Un <Separator /> con el espaciado adecuado para formularios, que acepta todas sus props.

Prop	Tipo	Predeterminado
`children`Texto opcional que se muestra en medio de la línea.	`ReactNode`	`–`
`align`Dónde se sitúa el texto a lo largo de la línea.	`"start" \| "center" \| "end"`	`"center"`
`decorative`Oculta una línea simple a los lectores de pantalla cuando es solo visual.	`boolean`	`false`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

Atributo	Descripción
`data-slot="field-separator"`	Selecciona los separadores de campo en CSS.
`data-content`	Presente cuando el separador tiene texto.
`data-slot="separator-label"`	El elemento que envuelve el texto.

FieldItem

Envuelve un checkbox o radio y su etiqueta dentro de un grupo, para que cada elemento se pueda deshabilitar por separado.

Prop	Tipo	Predeterminado
`disabled`	`boolean`	`false`
`render`	`ReactElement \| (props, state) => ReactElement`	`<div>`

FieldValidity

Renderiza cualquier cosa a partir del estado de validez del campo, por ejemplo un medidor de seguridad o un contador de caracteres.

Prop	Tipo	Predeterminado
`children`	`(state: { validity, errors, error, value }) => ReactNode`	`–`

Usado en bloques

Bloques que se construyen sobre Field.