shadcn.io is not affiliated with official shadcn/ui
Registration Fields Settings Block for React
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 Base 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.
Related
- @Pro
Create Account Handle Check Login
Sign-up and consentA sign-up page for a community forum in two columns of fields: a handle with an at sign that checks itself against a typed taken list and offers three tries as buttons, then the email, a password with an eight-character hint and Create account.
- Pro
User Fields Settings
Fields and formsA profile fields panel: a table with a row per field showing its type, a Required switch, who can see it and its rule in words, with rules that open in place (a preset, the shortest and longest answer and a Try a value field that says Valid or why not) and the member's form drawn from the same fields.
- Pro
Custom Fields Settings
Fields and formsAn Add field sheet open over a drawn Contacts table: a name, a type picked from six cards, the options that belong to that type, a live preview of the field, and an Add that appends a column to the table behind it.
- Pro
Default Values Settings
Fields and formsA task defaults panel: a priority, an assignee, days until due (calendar or working days), an estimate, up to four labels and who can see a task, beside a drawn new task that shows every default applied and the due date worked out from a fixed day.
- Pro
Onboarding Flow Settings
Product controlsAn onboarding flow editor with a funnel: five steps in order with a bar of who finishes each, switches to turn steps off, a Required toggle, Move up and Move down, the biggest drop worked out again after every change, and a drawn screen of the step people see.
- Pro
Sign-in Methods Settings
Sign-in and securityA sign-in methods settings panel with five methods you can switch and reorder, a drawn sign-in card that is redrawn from them, a last-method guard and a lockout rule that restates itself.