Field

1import { Field, FieldSet, FieldLegend, FieldGroup } from "@/components/ui/field";
2
3<Field />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import {
5  Field as ArkField,
6  useFieldContext as useArkFieldContext,
7} from "@ark-ui/react/field";
8import { Fieldset as ArkFieldset } from "@ark-ui/react/fieldset";
9import type React from "react";
10import { tv, type VariantProps } from "tailwind-variants";
11import { cn } from "@/lib/utils";
12import { Separator } from "@/registry/react/components/separator";
13
14export const useField = useArkFieldContext;
15
16const fieldVariants = tv({
17  base: [
18    "group/field",
19    "w-full",
20    "flex gap-2",
21    "data-invalid:text-destructive",
22    "dark:data-invalid:text-destructive-foreground",
23  ],
24  variants: {
25    orientation: {
26      vertical: ["flex-col *:w-full [&>.sr-only]:w-auto"],
27      horizontal: [
28        "flex-row items-center",