Field

Field is a form field component that provides structure for inputs with labels, descriptions, and validation.

The Field component system provides a flexible, accessible way to build form interfaces with proper labeling, help text, error messaging, and validation feedback. It supports multiple layout orientations (vertical, horizontal, and responsive) through composable subcomponents.

This component integrates with form validation libraries and automatically handles accessibility attributes like aria-invalid, aria-describedby, and proper label associations. Use Field components to create consistent, accessible form experiences throughout your application.

Example

"use client"

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@strongtie/design-system/field"
import { Input } from "@strongtie/design-system/input"

export function FieldDefault() {
  return (
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" type="email" placeholder="you@example.com" />
      <FieldDescription>
        We'll never share your email with anyone else.
      </FieldDescription>
    </Field>
  )
}

Installation


npm install @strongtie/design-system

import { Field } from "@strongtie/design-system/field"

Components

This module exports the following components:

Field
FieldSet
FieldLegend
FieldGroup
FieldContent
FieldLabel
FieldTitle
FieldDescription
FieldSeparator
FieldError

Props

`<Field>`

Prop	Type	Default	Description
`orientation`	`"vertical" \| "horizontal" \| "responsive" \| null`	-

`<FieldLegend>`

Prop	Type	Default	Description
`variant`	`label` \| `legend`	`legend`

`<FieldError>`

Prop	Type	Default	Description
`errors`	`({ message?: string; })[] \| undefined`	-

Example

"use client"

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@strongtie/design-system/field"
import { Input } from "@strongtie/design-system/input"

export function FieldDefault() {
  return (
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" type="email" placeholder="you@example.com" />
      <FieldDescription>
        We'll never share your email with anyone else.
      </FieldDescription>
    </Field>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

field

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Empty Hover Card

On This Page

Example Installation Components Props <Field><FieldLegend><FieldError>Example Styling Classes Accessibility

Contribute

Field

Field is a form field component that provides structure for inputs with labels, descriptions, and validation.

Example

"use client"

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@strongtie/design-system/field"
import { Input } from "@strongtie/design-system/input"

export function FieldDefault() {
  return (
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" type="email" placeholder="you@example.com" />
      <FieldDescription>
        We'll never share your email with anyone else.
      </FieldDescription>
    </Field>
  )
}

Installation


npm install @strongtie/design-system

import { Field } from "@strongtie/design-system/field"

Components

This module exports the following components:

Field
FieldSet
FieldLegend
FieldGroup
FieldContent
FieldLabel
FieldTitle
FieldDescription
FieldSeparator
FieldError

Props

`<Field>`

Prop	Type	Default	Description
`orientation`	`"vertical" \| "horizontal" \| "responsive" \| null`	-

`<FieldLegend>`

Prop	Type	Default	Description
`variant`	`label` \| `legend`	`legend`

`<FieldError>`

Prop	Type	Default	Description
`errors`	`({ message?: string; })[] \| undefined`	-

Example

"use client"

import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@strongtie/design-system/field"
import { Input } from "@strongtie/design-system/input"

export function FieldDefault() {
  return (
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" type="email" placeholder="you@example.com" />
      <FieldDescription>
        We'll never share your email with anyone else.
      </FieldDescription>
    </Field>
  )
}

Styling

Components can be styled using the className prop. The design system uses Tailwind CSS for styling.

Classes

CSS classes used by this component:

field

Accessibility

Ensure proper accessibility attributes are added when implementing this component.

Empty Hover Card

On This Page

Example Installation Components Props <Field><FieldLegend><FieldError>Example Styling Classes Accessibility

Contribute