Field

1import * as React from 'react'
2import { cn } from '@/lib/utils'
3import { Label } from '@/components/ui/label'
4 
5/** A vertical stack of related fields. */
6const FieldGroup = React.forwardRef<
7  HTMLDivElement,
8  React.HTMLAttributes<HTMLDivElement>
9>(({ className, ...props }, ref) => (
10  <div ref={ref} className={cn('flex flex-col gap-5', className)} {...props} />
11))
12FieldGroup.displayName = 'FieldGroup'
13 
14/** A single form field: groups a label, control, description and error. */
15const Field = React.forwardRef<
16  HTMLDivElement,
17  React.HTMLAttributes<HTMLDivElement>
18>(({ className, ...props }, ref) => (
19  <div ref={ref} className={cn('flex flex-col gap-1.5', className)} {...props} />
20))
21Field.displayName = 'Field'
22 
23const FieldLabel = React.forwardRef<
24  React.ElementRef<typeof Label>,
25  React.ComponentPropsWithoutRef<typeof Label>
26>(({ className, ...props }, ref) => (
27  <Label ref={ref} className={cn('text-xs', className)} {...props} />
28))
29FieldLabel.displayName = 'FieldLabel'
30 
31const FieldDescription = React.forwardRef<
32  HTMLParagraphElement,
33  React.HTMLAttributes<HTMLParagraphElement>
34>(({ className, ...props }, ref) => (
35  <p
36    ref={ref}
37    className={cn('text-xs font-medium text-muted-foreground', className)}
38    {...props}
39  />
40))
41FieldDescription.displayName = 'FieldDescription'
42 
43const FieldError = React.forwardRef<
44  HTMLParagraphElement,
45  React.HTMLAttributes<HTMLParagraphElement>
46>(({ className, children, ...props }, ref) => {
47  if (!children) return null
48  return (
49    <p
50      ref={ref}
51      role="alert"
52      className={cn(
53        'text-xs font-bold uppercase tracking-wide text-destructive',
54        className
55      )}
56      {...props}
57    >
58      {children}
59    </p>
60  )
61})
62FieldError.displayName = 'FieldError'
63 
64export { Field, FieldGroup, FieldLabel, FieldDescription, FieldError }