shadcn.io is not affiliated with official shadcn/ui
Responsive Layout Business Form Block for Solid
An Add your business form that reflows by the width of its own box: a slider and three presets set the width from 240 to 720 px, and the layout goes from stacked to two columns to labels beside fields.
Installation
Overview
See a form respond to the room it is given, with this responsive layout form for Solid with Ark UI. A compact header names the layout and the measured width of the form ("Two columns, 560 px") over a hairline frame with a plus mark on each corner. A toolbar band holds a width slider from 240 to 720 px and three presets, Narrow, Medium and Wide, in a Segment Group; below it the form sits in a box of exactly that width. Its layout comes from container queries, not the screen: stacked under 448 px, two columns up to 672 px, and labels beside their fields from there. The fields are a business name, a Select for the category, phone, website, address, an about text, and a Checkbox for showing the phone number. Add business checks the fields, names the first problem and focuses it. On a phone the box keeps its width and scrolls sideways. The Shine Button is the only colored control. It's built from Input, Textarea, Select, Segment Group, Checkbox, Shine Button and Guides, with a CSS entrance only. For forms that live in a drawer, a sidebar or a resizable pane as well as a page.
FAQ
Why container queries instead of breakpoints?
A form often sits in a space whose width has nothing to do with the screen: a drawer, a modal, a column beside a table. The frame is a @container and every field row reads its width, so the same markup stacks in a 320 px drawer and lays out in two columns on a wide page. The layout name in the header is worked out from the measured width with the same two thresholds (448 and 672 px, the @md and @2xl sizes), so words and layout cannot disagree.
How is the width measured?
A ResizeObserver watches the frame and reports its content width, rounded to a pixel; until it has reported, the header uses the width you chose. The slider's value text is the same sentence, so a screen reader hears "Two columns, 560 px" as you move it.
How do I change the breakpoints or add a layout?
The thresholds are TWO_COLUMNS_AT and LABELS_BESIDE_AT and the @md and @2xl classes on the rows; change them together. Each row's wide prop decides whether it spans both columns in the two-column layout.
What happens on a phone?
The slider and the presets still work, but a phone screen is narrower than a Medium or Wide box, so the box keeps its chosen width and the band around it scrolls sideways. The scroll region can be reached with the keyboard and is named.