Form

This component requires the FyskProvider. See Quick Start →

Preview

Installation

1
npx shadcn@latest add https://fysk.dev/r/form.json

Usage

1
import { Form, FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui"
2
import { useForm } from "react-hook-form"
3

4
const form = useForm({ ... })
5

6
<Form onSubmit={form.handleSubmit(onSubmit)}>
7
<FormField
8
  control={form.control}
9
  name="username"
10
  render={({ field }) => (
11
    <FormItem>
12
      <FormLabel>Username</FormLabel>
13
      <FormControl><Input {...field} /></FormControl>
14
      <FormMessage />
15
    </FormItem>
16
  )}
17
/>
18
<Button type="submit">Submit</Button>
19
</Form>

Examples

Complete Feedback Loop

Showcasing the built-in overlays for submission and success messages.

Features

• Integrated State: The state prop handles loading, success, and error globally for the form, including blur/overlay effects.

• Auto-Aria: Components like FormControl and FormMessage automatically sync IDs and aria-describedby for a11y.

• Slot Implementation: Uses Radix Slot in FormControl to safely inject props into any child input component.

• Hook Integration: Designed specifically to work with react-hook-form and zod for declarative validation.

Props

Form

FormField

A wrapper around react-hook-form's Controller that provides context to child components.

FormItem

A container for a single form field. Provides spacing and context for associating labels, descriptions, and error messages.

FormLabel

A label for form inputs. Automatically associates with the input via the FormItem context and shows error styling when validation fails.

FormControl

Wraps form inputs to provide proper accessibility attributes. Uses Radix Slot to merge props with the child element.

When used within a FormField, automatically adds unique ID for label association, aria-describedby for description and error message, and aria-invalid when field has validation errors.

FormDescription

Provides additional context or instructions for a form field. Automatically associated with the input via aria-describedby.

FormMessage

Displays validation error messages for a form field. When used within a FormField, automatically displays the error message from react-hook-form validation.

Hooks

useFormField

Hook to access the current form field's state and metadata. Must be used within a FormField and FormItem component.

Returns:

All components accept standard props from their respective Radix and HTML elements.