shadcn.io is not affiliated with official shadcn/ui
No Custom Fields Empty State Block for Solid
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 Solid with Ark 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.