Form Wizard
A three step React form wizard with a stepper for basics, details and review, per step fields, and back and next buttons that become submit at the end.
src/registry/blocks/form-wizard.tsx/r/form-wizard.json
Installation#
bash
npx shadcn@latest add @minidev/form-wizard
MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/form-wizard.json
Usage#
tsx
import { FormWizard } from "@/components/ui/form-wizard"
export function Example() {
return <FormWizard />
}
API reference#
FormWizard takes no props. It ships with realistic sample content: install it, then edit the copy and data in the file directly. The file is yours.
Dependencies#
npm
React only
Built from
Related forms components#
Onboarding FlowA three step onboarding card for naming a workspace, inviting teammates by email and reviewing theme choices, with step progress and back or continue.AutocompleteText input that filters string options as you type, using ARIA combobox and listbox roles. Works controlled or uncontrolled and lists up to eight matches.Calendar MonthMonth calendar grid with weekday headers and clickable day cells that highlight the selected date. A simple Tailwind base for date views and schedulers.Character CountLive React character counter that shows the current count against a limit and turns red when it goes over. Announces changes politely to screen readers.Checkbox GroupVertical wrapper that groups related checkboxes under role group with even spacing. Use it with Checkbox and labels for multi select settings.CheckboxShadcn style checkbox on Base UI with an animated check, indeterminate state, invalid and disabled styles, and an enlarged hit area for touch.
All form components