Form

import { Form } from "@tesseract-nexus/tesserix-ui"

export { Form } from "./form"
export type { FormProps } from "./form"

export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {}
 
const Form = React.forwardRef<HTMLFormElement, FormProps>(
  ({ className, ...props }, ref) => (
    <form ref={ref} className={cn("space-y-6", className)} {...props} />
  )
)
Form.displayName = "Form"
 
export interface FormFieldProps {
  name: string
  children: React.ReactNode
  error?: string
}
export interface FormItemProps extends React.HTMLAttributes<HTMLDivElement> {}
 
const FormItem = React.forwardRef<HTMLDivElement, FormItemProps>(
  ({ className, ...props }, ref) => (
    <div ref={ref} className={cn("space-y-2", className)} {...props} />
  )
)
FormItem.displayName = "FormItem"
 
export interface FormLabelProps
  extends React.LabelHTMLAttributes<HTMLLabelElement> {
  required?: boolean
}
export interface FormControlProps extends React.HTMLAttributes<HTMLDivElement> {}
 
const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
  ({ ...props }, ref) => {
    const { id, invalid } = useFormField()
 
    return (
      <div ref={ref} {...props}>
        {React.Children.map(props.children, (child) => {
          if (React.isValidElement(child)) {
            return React.cloneElement(child as React.ReactElement<any>, {
              id,
              "aria-invalid": invalid,
              "aria-describedby": invalid ? `${id}-error` : undefined,
            })
          }
          return child
        })}
      </div>
    )
  }
)
FormControl.displayName = "FormControl"
 
export interface FormDescriptionProps
  extends React.HTMLAttributes<HTMLParagraphElement> {}
 
const FormDescription = React.forwardRef<
  HTMLParagraphElement,
  FormDescriptionProps
>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn("text-sm text-muted-foreground", className)}
    {...props}
  />
))
FormDescription.displayName = "FormDescription"
 
export interface FormMessageProps
  extends React.HTMLAttributes<HTMLParagraphElement> {}
 
const FormMessage = React.forwardRef<HTMLParagraphElement, FormMessageProps>(
  ({ className, children, ...props }, ref) => {
    const { id, error } = useFormField()
 
    if (!error && !children) {
      return null
    }
 
    return (
      <p
        ref={ref}
        id={`${id}-error`}
        className={cn("text-sm font-medium text-destructive", className)}
        {...props}
      >
        {error || children}
      </p>
    )
  }
)
FormMessage.displayName = "FormMessage"
 
export {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormDescription,
  FormMessage,
  useFormField,
}

No explicit cva variant map found. Variations are primarily structural/compositional for this component.

import { Form } from "@tesseract-nexus/tesserix-ui"
 
export function Example() {
  return <Form />
}

// Compose with domain wrappers in product code
<Form className="w-full" />

// Avoid one-off hardcoded values that bypass tokens
<Form className="bg-[#123456] text-[#fafafa] px-[13px]" />