Field

1"use client";
2
3import * as React from "react";
4import { Field as BaseField } from "@base-ui/react/field";
5
6import { cn } from "@/lib/utils";
7import { inputVariants } from "@/registry/default/input/input";
8
9function Field({ className, ...props }: BaseField.Root.Props) {
10  return (
11    <BaseField.Root
12      data-slot="field"
13      className={cn("space-y-2", className)}
14      {...props}
15    />
16  );
17}
18
19function FieldLabel({ className, ...props }: BaseField.Label.Props) {
20  return (
21    <BaseField.Label
22      data-slot="field-label"
23      className={cn(
24        "text-foreground flex items-center gap-2 text-sm leading-5 font-medium select-none",
25        "data-disabled:pointer-events-none data-disabled:opacity-60",
26        "data-invalid:text-destructive",
27        className,
28      )}
29      {...props}
30    />
31  );
32}
33
34function FieldControl({ className, ...props }: BaseField.Control.Props) {
35  return (
36    <BaseField.Control
37      data-slot="field-control"
38      className={cn(inputVariants(), className)}
39      {...props}
40    />
41  );
42}
43
44function FieldDescription({
45  className,
46  ...props
47}: BaseField.Description.Props) {
48  return (
49    <BaseField.Description
50      data-slot="field-description"
51      className={cn("text-muted-foreground text-sm", className)}
52      {...props}
53    />
54  );
55}
56
57function FieldError({ className, ...props }: BaseField.Error.Props) {
58  return (
59    <BaseField.Error
60      data-slot="field-error"
61      className={cn("text-destructive text-sm", className)}
62      {...props}
63    />
64  );
65}
66
67function FieldErrorSlot({ className, ...props }: React.ComponentProps<"div">) {
68  return (
69    <div
70      data-slot="field-error-slot"
71      className={cn(
72        "-mt-2 grid h-0 overflow-clip [interpolate-size:allow-keywords] *:col-start-1 *:row-start-1",
73        "ease-out-expo transition-[height,margin-top] duration-140 motion-reduce:transition-none",
74        "has-[[data-slot=field-error]:not([data-ending-style])]:mt-0 has-[[data-slot=field-error]:not([data-ending-style])]:h-auto",
75        // Opacity fade on child FieldError
76        "*:data-[slot=field-error]:transition-opacity *:data-[slot=field-error]:duration-140 motion-reduce:*:data-[slot=field-error]:transition-none",
77        "[&>[data-slot=field-error][data-ending-style]]:opacity-0 [&>[data-slot=field-error][data-starting-style]]:opacity-0",
78        // When swapping errors: instantly hide the exiting one, show the entering one.
79// … truncated