Form

Example

"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Button } from "@strongtie/design-system/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@strongtie/design-system/form"
import { Input } from "@strongtie/design-system/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@strongtie/design-system/select"
import { useForm } from "react-hook-form"
import { z } from "zod"

const formSchema = z.object({
  projectName: z
    .string()
    .min(3, { message: "Project name must be at least 3 characters." }),
  email: z.email({ message: "Enter a valid email address." }),
  connectorType: z.string().min(1, { message: "Select a connector type." }),
})

type FormValues = z.infer<typeof formSchema>

export function FormDefault() {
  const [submitted, setSubmitted] = React.useState<FormValues | null>(null)

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      projectName: "",
      email: "",
      connectorType: "",
    },
  })

  const onSubmit = (values: FormValues) => {
    setSubmitted(values)
  }

  return (
    <div className="w-full max-w-sm space-y-4">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="projectName"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Project name</FormLabel>
                <FormControl>
                  <Input placeholder="Harbor View Deck" {...field} />
                </FormControl>
                <FormDescription>
                  Shown on every submittal generated for this job.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Contact email</FormLabel>
                <FormControl>
                  <Input
                    type="email"
                    placeholder="you@example.com"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="connectorType"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Connector type</FormLabel>
                <Select onValueChange={field.onChange} value={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Select a connector type" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="hanger">Joist hanger</SelectItem>
                    <SelectItem value="holdown">Holdown</SelectItem>
                    <SelectItem value="strap">Strap tie</SelectItem>
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />

          <Button type="submit">Submit</Button>
        </form>
      </Form>

      {submitted && (
        <div className="rounded-md border p-4 text-sm">
          <p className="font-medium">Submitted</p>
          <pre className="text-muted-foreground mt-2 text-xs">
            {JSON.stringify(submitted, null, 2)}
          </pre>
        </div>
      )}
    </div>
  )
}

Props

<FormField>

Prop	Type	Default
`name` *	`string`	-
`render` *	`({ field, fieldState, formState, }: { field: ControllerRenderProps<TFieldValues,...`	-
`control`	`Control<TFieldValues, any, TFieldValues>`	-
`defaultValue`	`any`	-
`disabled`	`boolean`	-
`exact`	`boolean`	-
`rules`	`Omit<RegisterOptions<TFieldValues, TName>, "disabled" \| "valueAsNumber" \| "value...`	-
`shouldUnregister`	`boolean`	-

Example

"use client"

import * as React from "react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Button } from "@strongtie/design-system/button"
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@strongtie/design-system/form"
import { Input } from "@strongtie/design-system/input"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@strongtie/design-system/select"
import { useForm } from "react-hook-form"
import { z } from "zod"

const formSchema = z.object({
  projectName: z
    .string()
    .min(3, { message: "Project name must be at least 3 characters." }),
  email: z.email({ message: "Enter a valid email address." }),
  connectorType: z.string().min(1, { message: "Select a connector type." }),
})

type FormValues = z.infer<typeof formSchema>

export function FormDefault() {
  const [submitted, setSubmitted] = React.useState<FormValues | null>(null)

  const form = useForm<FormValues>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      projectName: "",
      email: "",
      connectorType: "",
    },
  })

  const onSubmit = (values: FormValues) => {
    setSubmitted(values)
  }

  return (
    <div className="w-full max-w-sm space-y-4">
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
          <FormField
            control={form.control}
            name="projectName"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Project name</FormLabel>
                <FormControl>
                  <Input placeholder="Harbor View Deck" {...field} />
                </FormControl>
                <FormDescription>
                  Shown on every submittal generated for this job.
                </FormDescription>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="email"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Contact email</FormLabel>
                <FormControl>
                  <Input
                    type="email"
                    placeholder="you@example.com"
                    {...field}
                  />
                </FormControl>
                <FormMessage />
              </FormItem>
            )}
          />

          <FormField
            control={form.control}
            name="connectorType"
            render={({ field }) => (
              <FormItem>
                <FormLabel>Connector type</FormLabel>
                <Select onValueChange={field.onChange} value={field.value}>
                  <FormControl>
                    <SelectTrigger>
                      <SelectValue placeholder="Select a connector type" />
                    </SelectTrigger>
                  </FormControl>
                  <SelectContent>
                    <SelectItem value="hanger">Joist hanger</SelectItem>
                    <SelectItem value="holdown">Holdown</SelectItem>
                    <SelectItem value="strap">Strap tie</SelectItem>
                  </SelectContent>
                </Select>
                <FormMessage />
              </FormItem>
            )}
          />

          <Button type="submit">Submit</Button>
        </form>
      </Form>

      {submitted && (
        <div className="rounded-md border p-4 text-sm">
          <p className="font-medium">Submitted</p>
          <pre className="text-muted-foreground mt-2 text-xs">
            {JSON.stringify(submitted, null, 2)}
          </pre>
        </div>
      )}
    </div>
  )
}

Props

<FormField>

Prop	Type	Default
`name` *	`string`	-
`render` *	`({ field, fieldState, formState, }: { field: ControllerRenderProps<TFieldValues,...`	-
`control`	`Control<TFieldValues, any, TFieldValues>`	-
`defaultValue`	`any`	-
`disabled`	`boolean`	-
`exact`	`boolean`	-
`rules`	`Omit<RegisterOptions<TFieldValues, TName>, "disabled" \| "valueAsNumber" \| "value...`	-
`shouldUnregister`	`boolean`	-

Example

Install

Components

Props

`<FormField>`

Variants

Form

Example

Install

Components

Props

`<FormField>`

Variants