Form Item Layout

Docs

Form Item Layout

A helper component that provides a layout for form items.

import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { Button, Form_Shadcn_, FormControl_Shadcn_, FormField_Shadcn_ } from 'ui'
import { z } from 'zod'
import { Input } from 'ui-patterns/DataInputs/Input'
import { FormItemLayout } from 'ui-patterns/form/FormItemLayout/FormItemLayout'
 
const formSchema = z.object({
  username: z.string().min(2, {
    message: 'Username must be at least 2 characters.',
  }),
})
 
export function FormItemLayoutDemo() {
  // 1. Define your form.
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: '',
    },
  })
 
  // 2. Define a submit handler.
  function onSubmit(values: z.infer<typeof formSchema>) {
    // Do something with the form values.
    // ✅ This will be type-safe and validated.
    console.log(values)
    // action('form form.handleSubmit(onSubmit)')(values)
  }
  return (
    <Form_Shadcn_ {...form}>
      <form className="w-96 flex flex-col gap-3" onSubmit={form.handleSubmit(onSubmit)}>
        <FormField_Shadcn_
          name="username"
          control={form.control}
          render={({ field }) => (
            <FormItemLayout
              label="Username"
              description="This is your public display name"
              labelOptional="optional"
            >
              <FormControl_Shadcn_>
                <Input placeholder="mildtomato" {...field} />
              </FormControl_Shadcn_>
            </FormItemLayout>
          )}
        />
        <Button size="small" type="secondary" htmlType="submit">
          Submit
        </Button>
      </form>
    </Form_Shadcn_>
  )
}

Usage

This component is to help with the layout of form items. It automatically provides FormItem, FormLabel, FormMessage and FormDescription. The styling and layout of these components can be customized by passing in the components as props.

The components that can be replaced in react-hook-form atoms are highlighted below:

<FormItem_Shadcn_>
  <FormLabel_Shadcn_>Username</FormLabel_Shadcn_>
  <FormControl_Shadcn_>
    <Input placeholder="shadcn" {...field} />
  </FormControl_Shadcn_>
  <FormDescription_Shadcn_>This is your public display name.</FormDescription_Shadcn_>
  <FormMessage_Shadcn_ />
</FormItem_Shadcn_>

Using FormItemLayout it can look like this:

<FormItemLayout label="Username" description="This is your public display name">
  <FormControl_Shadcn_>
    <Input placeholder="mildtomato" {...field} />
  </FormControl_Shadcn_>
</FormItemLayout>

Please note that you must still use FormControl_Shadcn_ to wrap input fields.

Examples

With Select component

Horizontal layout

This is useful for forms inside a <SidePanel/> / <Sheet/> component.

With Switch component

With Checkbox component

List of items as Checkboxes

Before label

You can insert any React.Node or string before the label using the beforeLabel prop.

After label

You can insert any React.Node or string after the label using the afterLabel prop.

PreviousInner Side Menu

NextMulti Select