shadcn.io is not affiliated with official shadcn/ui
Custom Fields CRUD Block for Radix UI
A CRM's custom field definitions beside one definition's form and the field as people will see it, with a type-change warning for used fields, a New field that opens the same form blank, and a delete that shows how many records lose the value.
Installation
Overview
Define what a record can hold and see it before it ships, with these custom fields for React with Radix UI. A hairline frame with a plus mark on each corner puts the six field definitions of Fieldloom, a CRM, at the start (label, type and "used by 31 records") and one definition's form at the end: a label in an Input, a type in a Native Select, a Required Switch and, for a choice list, its options in a Tags Input. Under the form the field is drawn as people will see it and follows every keystroke. Changing the type of a field that records already use warns "31 records keep their values as text" before Save applies it. New field opens the same form blank, Discard puts the saved values back, and Delete opens an Alert Dialog that says "Removes the value from 31 records" and leaves an Undo in the foot that restores the definition and its values. Save is the only Shine Button, the panes are ruled by Guides, and deleting every field shows an Empty state without the frame changing height. On a phone the form replaces the list with a Back button. For CRMs, ticketing tools, product databases and any record that teams extend.
FAQ
How do I fill it with my own fields?
Edit DEFS. Each has an id, a label, a kind of text, long text, number, date, flag or choice, a required flag, its options (choice lists only) and used, the number of records that hold a value. The list, its counts, the warning, the delete sentence and the preview all read that one list, and new fields take their id from a counter held in state.
What does the form refuse?
An empty label, one over 32 characters, or one another field already has; a choice list with fewer than two options or more than six, and a duplicate option; and a tenth-plus field, since a CRM holds up to ten. The reasons appear under their fields in slots that are always there, so the form never changes height, and focus goes to the first field with a problem. Nothing is checked until you press Save.
What happens to records when I change a type?
Nothing until you save, and the warning is on screen before you do: records keep their values as text, so no value is lost or rewritten. In your app that sentence should come from the server's own count of records that would change. A field with no records, such as one you just added, changes type without a warning.
What does Undo restore?
The deleted definition in the same position, with its options and the records' values, and it selects the restored field. A new Save replaces the Undo, so it never reaches back further than what you see. Delete is not offered on a blank new field.
What stays local, and how do I wire a real save?
The definitions live in React state in this tab and a reload brings the original six back; nothing is sent. In your app call your API in save and remove, take the definition and the record counts from the response, and show a server refusal in the same slots the form already has. The preview is drawn from the draft, not from live controls, so it never submits anything.
How does it look on a phone?
The list is the first screen; picking a field or New field swaps it for the form, which starts with a Back to fields button, and focus follows the change. The choice-list options box and the preview keep their height whatever the type, so switching types never moves the buttons.