Field

A flexible form field component for building accessible forms with labels, descriptions, and error messages.

CMSPayload CMS Integration

Field components can be configured through CMS fields, allowing content editors to customize labels, descriptions, and help text without code changes.

CMS Demo

See how content editors configure form fields in a CMS:

CMS FieldsEN

Label

Placeholder

Description

Error Message

Required

Disabled

Show Validation

This simulates how a content editor configures form fields in Payload CMS. Switch locales to see localized content.

CMS ConfigurationSimulates Payload CMS field configuration with localization

Payload Form Example

// In your Payload CMS form config
export const ContactForm = {
  slug: "contact-form",
  fields: [
    {
      name: "emailField",
      type: "group",
      fields: [
        { name: "label", type: "text", localized: true, required: true },
        { name: "description", type: "text", localized: true },
        { name: "placeholder", type: "text", localized: true },
        { name: "required", type: "checkbox", defaultValue: true },
      ],
    },
  ],
}

Rendering the Form

import { Field, FieldLabel, FieldDescription, FieldError, Input } from "@mordecai-design-system/ui"

export function ContactForm({ data, errors }) {
  const field = data.emailField
  return (
    <Field>
      <FieldLabel>
        {field.label}
        {field.required && <span className="text-destructive ml-1">*</span>}
      </FieldLabel>
      <Input placeholder={field.placeholder} required={field.required} />
      {field.description && <FieldDescription>{field.description}</FieldDescription>}
      {errors.email && <FieldError>{errors.email.message}</FieldError>}
    </Field>
  )
}

Basic Usage

FieldA form field with label and description

Installation

pnpm add @corew500/ui

Usage

import {
  Field,
  FieldLabel,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldSet,
  FieldLegend,
} from "@mordecai-design-system/ui"

<Field>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" />
  <FieldDescription>We'll never share your email.</FieldDescription>
</Field>

Examples

With Error

<Field data-invalid="true">
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" aria-invalid="true" />
  <FieldError>Please enter a valid email address.</FieldError>
</Field>

Horizontal Layout

<Field orientation="horizontal">
  <Checkbox id="terms" />
  <FieldLabel htmlFor="terms">Accept terms and conditions</FieldLabel>
</Field>

Field Group

<FieldGroup>
  <Field>
    <FieldLabel htmlFor="first">First Name</FieldLabel>
    <Input id="first" />
  </Field>
  <Field>
    <FieldLabel htmlFor="last">Last Name</FieldLabel>
    <Input id="last" />
  </Field>
</FieldGroup>

Fieldset with Legend

<FieldSet>
  <FieldLegend>Personal Information</FieldLegend>
  <FieldDescription>Please fill in your details below.</FieldDescription>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="name">Name</FieldLabel>
      <Input id="name" />
    </Field>
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" type="email" />
    </Field>
  </FieldGroup>
</FieldSet>

Sub-components

| Component | Description | |-----------|-------------| | Field | Container for a single form field | | FieldLabel | The field's label | | FieldDescription | Help text below the input | | FieldError | Error message display | | FieldGroup | Container for multiple fields | | FieldSet | HTML fieldset wrapper | | FieldLegend | Legend for fieldset | | FieldContent | Content wrapper for complex layouts | | FieldSeparator | Visual separator between fields |

Props

Field

Prop	Type	Default	Description
`orientation`	enum	`vertical`	—

FieldError

Prop	Type	Default	Description
`errors`	{ message?: string; }[]	—	—