Docs

Organisms

Form

Comprehensive form wrapper with field validation and layout.

5 examplesComposite ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui react-hook-form
Import
import { Form } from "@quinkit/ui";

Required packages

Powers Form field state and validation wiring. Add these packages before using this component:

  • @quinkit/ui
  • react-hook-form

Install command is shown above. Without the peer package, imports will fail at build time.

Interactive Examples

Live previews · code · themes · viewport · dark mode

Field validation

Per-field rules with inline error messages.

Field validation rendered preview

This is your public display name.

Submission states

Pending and success states around an async submit.

Submission states rendered preview

Mixed field types

Inputs, selects, switches, and textareas together.

Mixed field types rendered preview

Receive product updates.

Multi-section form

Group related fields into sections.

Multi-section form rendered preview

Personal

Address

Server-error handling

Surface root and field errors returned from a server.

Server-error handling rendered preview

Overview

Form is part of the Week 4–6 free core component set. It follows the shared component standard with TypeScript exports, semantic token styling, accessibility-minded markup, and Storybook examples.

Installation

bash
pnpm add @quinkit/ui react-hook-form

react-hook-form is a required peer dependency for Form. Use useForm from react-hook-form with Quinkit Form* primitives.

Accessibility Details

  • Uses semantic HTML or Radix primitives where applicable.
  • Interactive components expose keyboard/focus behavior through native controls or Radix.
  • ARIA roles, states, and labels are applied where relevant.

Styling

  • Uses semantic design tokens such as bg-background, text-foreground, border-border, bg-popover, and text-muted-foreground.
  • Motion-heavy components include reduced-motion compatible classes where applicable.

Accessibility & Keyboard

Form adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/form.json