Field | Glass UI

Full name

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>
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" />
      <FieldDescription>We'll only use this for account updates.</FieldDescription>
      <FieldError>Please enter a valid email address.</FieldError>
    </Field>
  )
}

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

export default function App() {
  return (
    <Field>
      <Label htmlFor="email">Email</Label>
      <Input id="email" 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 to keep label, control, and supporting copy grouped with consistent spacing.

Full name

Use the name people recognize in your workspace.

Error State

Compose FieldError alongside standard inputs when validation fails.

We'll only use this for account notifications.

Please enter a valid email address.

Textarea

The same pattern works for multiline fields too.

Bio

Keep it concise. You can edit this later.

Styling & API

Field is a plain structural wrapper. FieldDescription and FieldError are text primitives; pair them with the existing Label, Input, and Textarea components.

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