shadcn.io is not affiliated with official shadcn/ui
No Custom Fields Empty State Block for React
A custom fields page with none yet: a row of five field types, a label input with a live drawing of the control, and a sketch of the contact form where each added field fills the next dashed slot.
Installation
Overview
Let people shape the first extra field and see where it lands, with this no custom fields empty state for React with Base UI. A header sits over one framed panel for Fieldlathe, a CRM builder, and the panel has two cells. The first holds a Toggle Group of five types (Text, Number, Date, Dropdown and Checkbox), a label in a Field with an Input and a preview of the control the field will become, redrawn as you change the type or the label. The second cell sketches the contact form: two built-in rows and three slots, the first only dashed. The Shine Button, the only colored control, adds the field: the dashed slot becomes a solid row with the label and its type and the next slot opens. The frame's corners and band rules come from Guides, and the whole block uses CSS transitions only.
FAQ
What happens when I press Add field, and what stays in the page?
The field goes into the page's state: a row with its label and type appears on the sketch, the counter above reads "1 custom field" and the status line says it was added in this demo. Nothing is saved and no form is changed. Start over empties the sketch. To wire it for real, send the label and the type to your API where the code says so and render the fields it returns.
Is the preview a real field?
No. It is a drawing of the control, a box of one fixed height whatever the type, so choosing another type moves nothing. It is hidden from assistive technology because the label input and the type group already carry the same information. In your app, render the real component for each type.
What does it refuse?
An empty label ("Name the field first." with focus in the input), a label that matches one already added (compared without regard to case) and a fourth field, since the sketch has three slots. Each message appears in a reserved line under the input, so nothing shifts.
Is it usable with a keyboard and a screen reader?
The types are one group you move through with the arrow keys; the chosen one is announced as pressed and the status line says what the type holds ("Date: a day."). The sketch is a list named "Fields on the contact form" and each added row reads its label and type.
Related
- Pro
A catalog tool with no categories: one field for a path such as Clothing / Shoes / Boots, a tree of boxes under All categories that grows as you type with dashed boxes for what is new, and one Add category button.
- Pro
A tagging tool with no tags: a Tags popover drawn open over a list of items, a string with three tags hung on it, a name field and four patterns (solid, dashed, dotted, hatched) that tell tags apart without colour, and one Create tag button.
- Pro
No Contacts Empty State
Team and accessA contacts book's empty state with two tabs: Add one, a name, email and company form, and Import CSV, a drop zone that reads the file's header in your browser; one button for the active tab and an address-card tray whose dashed place turns solid.
- Pro
No Roles Empty State
Team and accessAn access-management tool's first-role page: a name field, five permission switches, a sentence that rewrites itself, and a key ring whose next free tag is dashed and shows the role you are building.
- Pro
An automations page with no rules: one sentence you finish with three selects (a trigger, a priority, an action), a count of how often it would have run on fourteen sample events, a row of dominoes that fall, and one Create automation button.
- Pro
Connect Tools Empty State
Apps and integrationsA full-height first-run screen for an integration hub: six tool cards with checkboxes at the end, and at the start a drawn hub whose spokes turn from dashed to solid, and whose sockets take a lettermark, as each tool is ticked.