Ark UI form blocks.

The 100 form blocks are sections built around fields: text, selects, dates, checkboxes, switches, addresses, multi-step flows and review screens. Each handles its own validation, hints and submit result, so you see how a field behaves when it is wrong, loading or done.

They are grouped into 13 kinds: Text fields, Selects, Dates and times, Numbers and pickers, Checkout and address, Dialogs and layouts, and more. Some are one field done well (a password with a strength meter, a one-time code), others are whole forms: autosave, branching, array rows and a form builder.

Email and Password Form covers credentials with a reveal button and a Caps Lock warning. Password Strength Form advises instead of a checklist. Multi Select Skills Form holds chips in a combobox with a limit. Array Fields Domain List Form edits repeating rows. Autosave Form saves after typing stops. Review and Submit Form ends a multi-step flow.

A comment says what the form does, then typed constants hold the options, limits and copy, a small function checks the values, and the component renders fields from the shared Field, Input and Select components. There is no form library in the blocks.

The blocks validate with their own small function and plain state, and set noValidate on the form so their messages show. To use react-hook-form and Zod, keep the Field, FieldLabel and FieldError markup, move the checks into a Zod schema, and drive each field's invalid prop from the form library's errors instead.

Submit runs a handler that calls preventDefault, checks the values, moves focus to the first problem and otherwise waits a moment. Where a comment says to save with your API, call your server action or endpoint, then set the success or error state from its response.

Errors sit under their field through FieldError, the field is marked with aria-invalid, and focus moves to the first invalid field on submit. Keep that behaviour when you map server-side errors back: set the same error state for the field name and call the same focus function.

The multi-step and review blocks hold every answer in one state object and a step index. Add a step by adding its fields to that object and its check to the step's validation, and keep the review screen reading from the same object so it always matches.

One-Time Code Input Form fills six slots, handles Backspace and arrows, and splits a pasted code across the slots. The expected code and the attempt limit are demo constants: remove them and verify the code on your server in the submit handler.

This page lists 100 of the category's 100 form blocks for React on Ark UI. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The form blocks here are written on Ark UI primitives; the layout, the copy and the theme tokens are the same on every base, and the install path follows it (/r/ark/form-accordion-sections.json). The other bases are one picker away from /form-block/ark.

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens, and imports our components (installed with it) on Ark UI. Icons come from lucide-react.

Open a block, copy its command and run it: `npx shadcn@latest add` with the block's registry URL, such as /r/ark/form-accordion-sections.json for Accordion Sections Form. The code is copied into your project and it's yours to edit.

The block's file and the components it imports: Accordion Sections Form brings Accordion, Button, Guides, Input, Label, Native Select, Shine Button and Textarea, installed before it. Nothing else changes in your project.

Use the filters above the grid: 13 kinds of form block, led by layouts (11), checkboxes and radios (10), switches and toggles (10) and validation and states (10), and sort by popular or name. A good first look: Accordion Sections Form, Address Form with ZIP Help and Array Fields Domain List Form. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a form block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the inputs and whole forms kinds.

Open its page and use the full-screen viewer (/view/form/ark/accordion-sections) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each form block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the form blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 100 form blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a form block, read it with get_block and install it on your React on Ark UI stack.

Pass `category: "form"` to search_blocks to search only the 100 form blocks, or to list_blocks for the 13 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "form", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.