Form

Form field structure wrappers

import {
  Form,
...

import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormLabel,
  FormMessage,
} from '@/components/ui/form'

export default function FormDemoExample() {
  return (
    <Form>
      <FormField name="username">
        <FormLabel>Username</FormLabel>
        <FormControl><input name="username" placeholder="fict-user" /></FormControl>
        <FormDescription>This is your public display name.</FormDescription>
        <FormMessage />
      </FormField>
    </Form>
  )
}

Installation

npx @fictjs/shadcn@latest add form

Install the runtime dependencies:

npm install @fictjs/radix-ui

Copy the Fict shadcn component into your project.

Source

components/ui/form.tsx

src/components/ui/form.tsx

import { Form as FormPrimitive } from '@fictjs/radix-ui'

import { cn } from '@/lib/cn'

export const Form = FormPrimitive.Root
export const FormField = FormPrimitive.Field

type GenericProps = {
  class?: string
  children?: unknown
  [key: string]: unknown
}

export function FormLabel(props: GenericProps) {
  const { class: className, ...rest } = props
  return <FormPrimitive.Label class={cn('text-sm font-medium leading-none', className)} {...rest} />
}

export function FormControl(props: GenericProps) {
  const { class: className, ...rest } = props
  return <FormPrimitive.Control class={cn('w-full', className)} {...rest} />
}

export function FormDescription(props: GenericProps) {
  const { class: className, ...rest } = props
  return <p class={cn('text-[0.8rem] text-muted-foreground', className)} {...rest} />
}

export function FormMessage(props: GenericProps) {
  const { class: className, ...rest } = props
  return <FormPrimitive.Message class={cn('text-[0.8rem] font-medium text-destructive', className)} {...rest} />
}

Usage

Field Hover Card