Field

A form field wrapper that associates a label, description, and error message with a form control.

Overview

Field wraps a form control with an accessible label and optional help text. It provides a description for additional guidance and an error message for validation feedback. Only one of description or error is shown at a time; error takes precedence. Note that Input and Select already integrate Field internally when a label prop is provided. Use Field directly when wrapping custom form controls or when you need a standalone label/error/description wrapper.

Accessibility

Associates a <label> element with the child control via htmlFor/id for screen reader accessibility.
error and description text are linked to the child control via aria-describedby.
Only one of error or description is rendered at a time — error takes precedence when both are provided.
When required is false, an "(선택)" optional indicator appears next to the label.

Import

import { Field } from "@cocso-ui/react";

Default

Pass a form control as a child. The label prop is required. Use description for help text and error for validation errors.

We'll never share your email.

Password

Password must be at least 8 characters.

import { Field, Input } from "@cocso-ui/react";

export default function FieldDefault() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4 p-4">
      <Field label="Email" description="We'll never share your email.">
        <Input placeholder="Enter your email" />
      </Field>
      <Field label="Password" required error="Password must be at least 8 characters.">
        <Input placeholder="Enter password" type="password" />
      </Field>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
`label*`	`string`	-	Label text rendered as a `<label>` element above the form control. Required for accessibility.
`children*`	`ReactNode`	-	The form control element (e.g., Input, Select, or any custom input). Receives `aria-describedby` via the Field context.
`description`	`string`	-	Help text displayed below the control in a muted style. Hidden when `error` is set.
`error`	`string`	-	Validation error message displayed below the control in red. Takes precedence over `description` when both are set.
`htmlFor`	`string`	-	The `id` of the form control, used for the label's `for` attribute. Provide when the child control's `id` is not auto-detected.
`required`	`boolean`	-	When `false`, displays an "(선택)" optional indicator next to the label, signaling the field is not mandatory.