shadcn.io is not affiliated with official shadcn/ui
Custom Fields Settings Block for React Aria
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 React Aria. 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.