Field

since 1.2

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>
  )
}

Install

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

Not installed yet? Add the package to your app:


npm install @strongtie/design-system

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`	-

Variants

orientation

verticalhorizontalresponsive

Empty Form