Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Form examples · Layouts

Compact Form for React

A compact sign-in form with tight spacing, shorter inputs and a full-width Sign In button.

Framework
UI library

Space-constrained places need compact forms: sign-in popovers, sidebars and small dialogs where every pixel counts. Two fields, username and password, sit in a FieldGroup with gap-3 instead of the default gap, each Field tightened to gap-1.5, with h-9 inputs, text-xs errors and a full-width Sign In button inside a max-w-sm form. A Controller wires each input into React Hook Form and a Zod schema checks them on submit.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

What makes this form compact?

The FieldGroup is gap-3 and each Field is gap-1.5, so label, input and error sit close together. Both inputs are h-9, both FieldErrors are text-xs, and the form is max-w-sm.

What do username and password have to satisfy?

username is z.string().min(2) and password is z.string().min(8). Neither passes a custom message, so FieldError shows Zod's default text, such as Too small: expected string to have >=2 characters.

How is the password field different from username?

Its Input sets type="password" and the placeholder ********. Username is a text input with the placeholder johndoe. Both spread the Controller's field. Each FieldLabel points at its input with htmlFor, such as compact-form-password.

How is Sign In sized?

Sign In is a type="submit" button with h-9 w-full, so it matches the input height and spans the column.

What are the starting values?

defaultValues sets username and password to empty strings, so an empty submit fails both minimums and shows both errors.

When do those minimums run?

mode is unset, so React Hook Form runs the Zod resolver when Sign In submits, then re-checks a field as you fix it. Once both pass, onSubmit logs the values.

All 42 form examples