shadcn.io is not affiliated with official shadcn/ui
Bounded Checkbox Group Form Block for Solid
A newsletter digest panel where you pick two to four of seven topics, with a live count, a rule line that says what to do next, and the rest disabled at the maximum.
Installation
Overview
Hold a choice to a range with this checkbox group form for Solid with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner. One row of label and control: at the start the group's name, a counter ("2 of 4 chosen") and a reserved line for the rule, at the end seven digest topics, each a box, a name and one line saying what it brings. The rule is two to four. Under two the line says how many more to pick, in between it says how many more you can add, and at four it reads "4 chosen: untick one to change" while the unticked rows are disabled. Save with fewer than two says how many are missing and puts focus on the first box. It stays quiet while nothing has changed. It's built from the Checkbox, Label, Shine Button and Guides, with a CSS entrance only. For newsletter topics, notification categories, interests and any "pick up to N" choice.
FAQ
How do I change the minimum and maximum?
Edit MIN and MAX at the top of the file. The rule line, the counter, the disabled rows and the Save check all read them, and ruleOf words each stage, so the copy stays true for any pair of numbers.
Why disable the rest at the maximum instead of refusing the click?
A disabled box tells you before you try, and the reason sits in the legend line beside it rather than in a tooltip. Ticked rows are never disabled, so you can always untick one to make room. The disabled names are shown at 70% foreground, not faded out, so they stay readable.
How does it work with a keyboard and a screen reader?
The boxes are one group named by the heading and described by the rule line, so the rule is read when focus enters. Each box is named by its row and described by its one line. Disabled boxes drop out of the tab order, which is why the reason is in text and not only in the state. The status line announces what Save did.
How does it look on a phone?
The label column stacks above the options, and the rows keep their full width with the line under each name. The foot is pinned to the bottom of the screen with Save at full width.
What stays local, and how do I connect it for real?
Nothing is subscribed: the saved topics live in the block's state and the foot says "Saved in this demo. Nothing was sent." In your app, replace the comment in submit with a request that stores the chosen ids against the subscriber, and enforce the same range on the server.