@manhphi1309/field

A beautifully designed, accessible set of field components to build robust forms.

Subcomponents

This package provides the following components:

• Field
• FieldLabel
• FieldDescription
• FieldError
• FieldGroup
• FieldLegend
• FieldSeparator
• FieldSet
• FieldContent
• FieldTitle

Dependencies

This package relies on:

• @manhphi1309/checkbox
• @manhphi1309/input
• @manhphi1309/label
• @manhphi1309/separator
• @manhphi1309/utils
• class-variance-authority
• clsx
• tailwind-merge

Installation

npm install @manhphi1309/field

Usage Example

import {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldContent,
} from "@manhphi1309/field"
import { Input } from "@manhphi1309/input"

export default function Example() {
  return (
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <FieldContent>
        <Input id="email" type="email" placeholder="[email protected]" />
        <FieldDescription>We will never share your email.</FieldDescription>
        <FieldError errors={[{ message: "Invalid email address" }]} />
      </FieldContent>
    </Field>
  )
}