Required and Optional Fields Form

A form showing the pattern for required versus optional fields with asterisks and labels.

Clear visual distinction between required and optional form fields using asterisks and helper text. Helps users understand which information is mandatory before they start filling out the form.

Required and Optional Fields Form preview

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/form-required-optional.json

npx shadcn@latest add https://www.shadcn.io/r/form-required-optional.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/form-required-optional.json

bunx shadcn@latest add https://www.shadcn.io/r/form-required-optional.json

Validation Inline

Inline field validation messages

Validation Summary

Error summary banner with inline errors

Validation Realtime

Live validation as users type

Field Hints

Field hints and helper text patterns

Disabled Fields

Disabled field states across input types

Readonly Fields

Read-only non-editable field display

FAQ

Last updated on March 24, 2026

Was this page helpful?

Repeatable Field Group Form

A form with repeatable field groups where each entry contains multiple related fields using React Hook Form's useFieldArray

Responsive Form Layout

A form that automatically switches between vertical and horizontal layouts based on screen size

Required and Optional Fields Form