registry:component

Field

v1.0.0ga

Form field composition helpers for labels and controls.

Registry Endpoint

Open JSON

https://registry.aavya.com/r/ui-field.json

npx shadcn@latest add https://registry.aavya.com/r/ui-field.json

Live Preview

Usage Snippet

import Field from '@/components/ui/field.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <Field />
    </div>
  )
}

Source Preview

'use client'

import { useMemo } from 'react'

import { cva, type VariantProps } from 'class-variance-authority'

import { cn } from '@/lib/utils'
import { Label } from '@/components/ui/label'
import { Separator } from '@/components/ui/separator'

function FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {
  return (
    <fieldset
      data-slot='field-set'
      className={cn(
        'flex flex-col gap-6',
        'has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',
        className
      )}
      {...props}
    />
  )
}

function FieldLegend({
  className,
  variant = 'legend',
  ...props
}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {
  return (
    <legend
      data-slot='field-legend'
      data-variant={variant}
      className={cn('mb-3 font-medium', 'data-[variant=legend]:text-base', 'data-[variant=label]:text-sm', className)}
      {...props}
    />
  )
}

function FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {
  return (
    <div
      data-slot='field-group'
      className={cn(
        'group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4',
        className
      )}
      {...props}
    />
  )
}

const fieldVariants = cva('group/field data-[invalid=true]:text-destructive flex w-full gap-3', {