Field

Installation

pnpm dlx @glinui/cli@latest add field

Prefer the package? npm install @glinui/ui @glinui/tokens

Usage

FieldControl wires one child control to its Field. It clones the child and injects the generated id (matching the label htmlFor), aria-describedby pointing at the description and error, aria-invalid when an error is present and aria-required. Put exactly one control inside it.

Unlike shadcn Field, which leaves id and aria wiring to you, Glin UI Field does it through FieldControl, so labels, hints and errors stay connected without manual ids. Controls rendered outside FieldControl are not wired.

import { Field, FieldControl, FieldDescription, FieldError, FieldLabel } from "@glinui/ui"
import { Input } from "@glinui/ui"
export function Demo() {

import { Field, FieldControl, FieldDescription, FieldError, FieldLabel } from "@glinui/ui"
import { Input } from "@glinui/ui"


export function Demo() {
  return (
    <Field>
      <FieldLabel>Email</FieldLabel>
      <FieldControl><Input type="email" placeholder="name@example.com" /></FieldControl>
      <FieldDescription>We never share your email.</FieldDescription>
      <FieldError>Enter a valid email address.</FieldError>
    </Field>
  )
}

import { Field, FieldControl, FieldError, FieldLabel } from "@glinui/ui"
import { Input } from "@glinui/ui"
export function Demo() {

import { Field, FieldControl, FieldError, FieldLabel } from "@glinui/ui"
import { Input } from "@glinui/ui"


export function Demo() {
  return (
    <Field invalid>
      <FieldLabel>Username</FieldLabel>
      <FieldControl><Input defaultValue="a" /></FieldControl>
      <FieldError errors={[{ message: "At least 3 characters" }]} />
    </Field>
  )
}

Accessibility

• Each Field generates ids so the label `htmlFor`, description and error are wired automatically via FieldControl.
• FieldError uses `role="alert"` so errors are announced.
• `aria-describedby` only lists parts that are rendered.
• FieldSet and FieldLegend use native fieldset and legend semantics.

Reduced Motion

Field is layout only and has no motion of its own.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { Field } from "@glinui/ui"