shadcn.io is not affiliated with official shadcn/ui
Registration Fields Settings Block for Ark UI
A sign-up form editor where the form is the editor: a drawn sign-up page with six fields, each with a Required toggle, a Show switch and Move up and Move down, a locked email and password, and a Publish form button in a slim bar.
Installation
Overview
Let admins build their sign-up form by looking at it, with this registration fields page for React with Ark UI. A whole screen with the page's rails and one band holds the title, a slim bar with the page's one primary, a Shine Button that publishes the form, and an outline Button that discards the changes, and under it a drawn sign-up page of six fields: full name, work email, password, company, role and a referral code. Each field has its own control strip, a Toggle that makes it required or optional, a Switch that shows or hides it, and Move up and Move down buttons. A hidden field's box turns dashed in the same space, an optional one says so in its label, and moving a field redraws the order. Work email and password are locked: always shown and required. A caption says how many fields visitors see and how many they must fill in, and the bar counts what isn't published. It's built from Toggle, Switch, Button, Shine Button and Guides, with a CSS entrance only. For an event, a community, a course or any product that decides what its sign-up asks for.
FAQ
Why is the form itself the editor?
Because the choice is visual: seeing the field disappear, or gain "(optional)", tells you what a visitor will meet. The boxes in the drawing are decorative and hidden from assistive technology; the real controls are the strips, each named for its field ("Required: Company", "Show Role", "Move Role up"), and the caption states the result in words.
Why can't email and password be hidden?
A sign-up needs a way to reach the person and a way to sign them in again, so those two fields are always shown and always required; their strips say so and keep only the move buttons. Edit PUBLISHED to change which fields are locked, what they are called and what their drawn boxes say.
How does reordering work without dragging?
Move up and Move down are buttons named for their field. The one at an end stays focusable and says "Full name is already first." instead of acting; after a move, focus stays on the button you pressed and the status line says the new place. The rows keep their positions while their content changes, so nothing jumps.
What does Publish form do, and what stays local?
It keeps the edited form as the published one, in this page only, and says how many changes it published; Discard puts the published form back. Nothing goes live and nobody signs up. To make it real, send the list (each field's id, whether it is shown, whether it is required and its position) to your API in the publish handler, and render your real sign-up page from the same list. Publish and Discard stay in place and focusable while nothing changed and answer "No changes to publish." in words.
Is it accessible, and how does it look on a phone?
The title is the page's only h1, the fields are a named list, and the status line is a polite live region that is present from the start and says what changed. Required is a toggle with an on and off state, Show is a switch, and no state is carried by colour alone. On a phone the strips stay on the field's label line while they fit and drop under it on the narrowest screens; the drawn heading and the drawn button are left out so the form fits the first screens.