Glass UI
GitHub

Field

Lightweight wrapper primitives for composing labels, controls, helper text, and errors.

Use the name people recognize in your workspace.

Installation

npx @glass-ui-kit/cli add field

Usage

import { Field, FieldDescription, FieldError, Input, Label } from "@glass-ui-kit/glass"


export default function App() {
  return (
    <Field className="space-y-1.5">
      <Label>Email</Label>
      <Input type="email" />
      <FieldDescription>We'll only use this for account updates.</FieldDescription>
      <FieldError>Please enter a valid email address.</FieldError>
    </Field>
  )
}

Examples

Default

Use Field as the canonical native-first composition helper for one logical field. Add layout classes yourself so stacked inputs and checkbox rows can use the same API.

Use the name people recognize in your workspace.

Error State

Set invalid on Field when the field should propagate aria-invalid to the control.

We'll only use this for account notifications.

Textarea

The same pattern works for multiline fields too.

Keep it concise. You can edit this later.

Styling

Field stays layout-agnostic. It provides lightweight context for generated ids, label binding, and aria-describedby wiring. Use className for layout and invalid for error state.

/* Native state */
<Field className="space-y-1.5">
  <Label>Name</Label>
  <Input />
  <FieldDescription>Use your full name.</FieldDescription>
  <FieldError>Required.</FieldError>
</Field>


/* Invalid state */
<Field invalid className="space-y-1.5">
  <Label>Email</Label>
  <Input />
  <FieldError>Required.</FieldError>
</Field>


/* Layout override */
<Field className="flex items-start gap-3">
  <Checkbox />
  <Label>Enable notifications</Label>
</Field>

API Reference

PropType
invalidboolean
classNamestring

Field also accepts standard div props. FieldDescription and FieldError accept standard paragraph props, and FieldError defaults to role="alert".

Checkbox Input