shadcn.io is not affiliated with official shadcn/ui
Custom Fields Settings Block for React
An 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.
Installation
Overview
Let people add their own columns to a table, and see the field before it exists, with this custom fields sheet for React with Base UI. A header names the table and lists its custom fields, with an outline Button, Add field, at its end. Below it a drawn Contacts table with two standard columns and three custom ones sits under a scrim, and the Add a field Sheet is drawn open on top of it: a name in an Input, six type cards (Text, Number, Select, Date, Checkbox, URL) and, under them, the options that belong to the chosen type. Text takes a longest answer; Number a range and a unit; Select a list of choices in Tags Input and an Allow several Switch; Date whether it has a time; Checkbox whether it starts ticked; URL whether it must be https. A preview draws the field the way Contacts will show it, with a sentence saying what it is. The primary, a Shine Button, adds a column to the drawn table, up to six custom fields. Add field in the header opens the real Sheet, with its focus trap and Escape. It's built from Sheet, Input, Tags Input, Switch, Button, Shine Button and Guides, with a CSS entrance only. For a CRM, a database, a project tool or any app where people add their own columns.
FAQ
Why is the sheet already open, and is it the real one?
Shown open in place for the preview: on load the sheet is a native dialog element drawn in place over the table, so nothing is trapped or focused and the docs page stays usable. The Add field button in the header opens the real catalog Sheet, from the side the page reads from, with its focus trap, Escape and focus back on the button, and the in-place copy stays closed until a reload. Both share one form component and one state, so what you typed in place is there in the real one. In your app keep only the Sheet and drop the in-place copy and its Escape handler.
What do the options do for each type?
They change with the card you choose and the preview follows them at once. Text takes a longest answer from 1 to 500 characters. Number takes a minimum, a maximum and an optional unit of up to eight letters, and refuses a minimum above the maximum. Select takes two to eight options, each up to 24 characters and used once, and whether several can be picked. Date can include a time, Checkbox can start ticked, and URL can accept only https links. Switching type keeps what you typed for the others, so switching back loses nothing.
When is the form checked, and where are the problems?
When you press Add field. A problem is shown in words under its field, in a place reserved for it so nothing moves, the field is marked invalid, and focus goes to the first one: an empty or repeated name, a range that doesn't add up, fewer than two options. Once all six fields are in use the name field says so.
What stays local, and how do I wire it up?
Everything. Adding appends a column to the drawn table and to the header's list, in this page only; the real sheet closes, focus returns to Add field and the status line says what was added. To make it real, send the new field (its name, type and options) to your API in the submit handler and build the table's columns from the response. Edit START for the existing fields and FRESH for what the sheet starts with.
Is it accessible, and how does it look on a phone?
The types are native radio buttons in a group named Type, so the arrow keys move between them; every field is labelled and its hint or problem is tied to it with aria-describedby. The drawn table and the preview box are hidden from assistive technology and the same facts are text: the header lists the columns and the sentence under the preview describes the field. On a phone the in-place sheet docks to the bottom of the stage with its body scrolling and the buttons pinned, and the real sheet takes the full width.
Related
- 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
Registration Fields Settings
Fields and formsA 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.
- 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
Webhook Endpoints Settings
API and webhooksA webhook endpoint settings sheet open over the endpoint list: an https URL, an event tree with mixed-state group checkboxes, a signing secret with Roll secret, and recent deliveries where a failed one can be resent with its signature worked out in the browser.
- Pro
Invite Members Dialog
Share and inviteA household calendar's Members page with its invite dialog shown open: one email field that knows the household's domain, so an outside address joins as a guest, the people who already have access, and a Send invite button that adds a pending row.