shadcn.io is not affiliated with official shadcn/ui
Control Bench Form Block for Solid
Twelve form controls on one bench, each in a cell with its catalog name and the value it holds: Fill sample, Clear and Validate, per-cell rules, and a count of how many are filled and invalid.
Installation
Overview
See every control a form needs in one place, with this control bench for Solid with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner. The frame is a grid of twelve cells on shared hairlines: text, email, amount, password, select, native select, date, checkbox, radio group, switch, slider and textarea. Each cell shows its label and its catalog name in a code tag, the control, an output that prints the value it holds right now, and a reserved slot for its rule. Fill sample fills all twelve, with one date deliberately too early, Clear empties them, and Validate, the Shine Button and the only colored control, checks the nine controls that have a rule, shows each error in its cell with a glyph and a sentence, moves focus to the first one and counts the result in a list under the grid: "11 filled, 1 invalid". The switch, the slider and the team select take anything, so they never fail. On a phone the grid is one column with the first six cells and a Show 6 more button. It's built from Input, Password Input, Select, Native Select, Checkbox, Radio Group, Switch, Slider, Textarea, Button and Guides, with a CSS entrance only. For design-system docs, QA of a theme, a screenshot of every state at once and anyone choosing which control fits a field.
FAQ
How do I add a control or change a rule?
Add its key to Name and Bench, an entry to CELLS, a branch in filledOf, problemOf and readOf, and a BenchCell with the control as its child. Rules live in problemOf only, and the counts under the grid derive from filledOf and problemOf, so nothing is typed twice.
Why is there no combobox, date picker or number input here?
Those controls have blocks of their own where their keyboard behavior and per-library differences are worked through. The bench keeps to controls that behave the same everywhere: the date is the browser's native date field and the amount is a text field with a decimal keyboard. Each cell's code tag says exactly what it shows.
When do errors appear?
Only after Validate, and then they update as you edit. Before it, the Invalid count reads "Not checked" so an empty bench does not look broken. Validate focuses the first control with a problem, opening the hidden cells on a phone if it must.
How does it look on a phone, and right to left?
One column, the first six cells and Show 6 more, which turns into Show fewer. Cells keep a minimum height, so filling a cell never moves its neighbors. In a right-to-left page the grid mirrors, and the code tags, email, amount, date and password stay left to right.
What stays local, and how do I connect it for real?
Everything: values live in this tab, the password is only counted ("12 characters") and shown nowhere, and nothing is sent. The bench is for looking, not for submitting. If you copy a control out of it, take the field wiring from the block that is about that control.