Field

1"use client";
2 
3import { Field as FieldPrimitive } from "@base-ui/react/field";
4import { Form as FormPrimitive } from "@base-ui/react/form";
5import type * as React from "react";
6import { cn } from "@/lib/utils";
7 
8/** Field wraps a label + control + description + error stack. */
9export function Field({
10  className,
11  ...props
12}: FieldPrimitive.Root.Props): React.ReactElement {
13  return (
14    <FieldPrimitive.Root
15      className={cn("group/field flex flex-col items-start gap-2", className)}
16      data-slot="field"
17      {...props}
18    />
19  );
20}
21 
22export interface FieldLabelProps extends FieldPrimitive.Label.Props {
23  /** Renders a small red asterisk after the label. */
24  required?: boolean;
25  /** Renders "(optional)" in tertiary text after the label. */
26  optional?: boolean;
27}
28 
29export function FieldLabel({
30  className,
31  children,
32  required,
33  optional,
34  ...props
35}: FieldLabelProps): React.ReactElement {
36  return (
37    <FieldPrimitive.Label
38      className={cn(
39        "inline-flex items-center gap-1.5 text-small font-medium text-ink",
40        className,
41      )}
42      data-slot="field-label"
43      {...props}
44    >
45      {children}
46      {required && (
47        <span
48          aria-hidden="true"
49          className="text-mini leading-none text-error-soft-fg"
50          data-slot="field-required"
51        >
52          *
53        </span>
54      )}
55      {optional && !required && (
56        <span
57          aria-hidden="true"
58          className="text-mini text-ink-muted"
59          data-slot="field-optional"
60        >
61          (optional)
62        </span>
63      )}
64    </FieldPrimitive.Label>
65  );
66}
67 
68export function FieldItem({
69  className,
70  ...props
71}: FieldPrimitive.Item.Props): React.ReactElement {
72  return (
73    <FieldPrimitive.Item
74      className={cn("flex", className)}
75      data-slot="field-item"
76      {...props}
77    />
78  );
79}
80 
81export function FieldDescription({
82  className,
83  ...props
84}: FieldPrimitive.Description.Props): React.ReactElement {
85  return (
86    <FieldPrimitive.Description
87      className={cn("text-mini text-ink-subtle", className)}
88      data-slot="field-description"
89      {...props}
90    />
91  );
92}
93 
94export function FieldSuccess({
95  className,
96  ...props
97}: FieldPrimitive.Description.Props): React.ReactElement {
98  return (
99    <FieldPrimitive.Description
100      className={cn(
101        "inline-flex items-center gap-1.5 text-mini text-success-soft-fg before:content-[''] before:size-[5px] before:rounded-full before:bg-success",
102        className,
103// … truncated