shadcn.io is not affiliated with official shadcn/ui
Nested Switches Digest Form Block for Svelte
An email digest setting three levels deep: one switch reveals the frequency, day and time, which hold a second switch that reveals an only-mentions checkbox, with a sentence reading the digest back.
Installation
Overview
Reveal settings only when they matter with this nested switch form for Svelte with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner. The first level is a Switch, "Email me a digest". Turned on, it opens a second level behind a line: a Segment Group for Daily or Weekly, two Native Selects for the day (only while Weekly) and the time, and a second switch, "Include comments". That one opens the third level, an "Only mentions" Checkbox. A closed level folds away and becomes inert, so its fields can't be reached, but it keeps its values: turn the digest off and on again and Weekly, Monday and 08:00 are still there. A band under the settings reads the digest back in a sentence ("Weekly on Monday at 08:00, with mentions."). The foot counts unsaved changes beside a Shine Button to save them and an outline Button to discard them. It's built from Switch, Segment Group, Native Select, Checkbox, Field, Button, Shine Button and Guides, with a CSS entrance only. For notification and report settings, onboarding preferences and any form where one choice gates others.
FAQ
How do I change the levels and their options?
Edit FREQUENCIES, DAYS and TIMES for the options and START for what is saved when the page opens. The sentence is built by summaryOf from the draft, so a new setting needs a line there. A new level is one more Reveal around its fields, placed inside the level that gates it.
How does a level fold away, and what happens to its values?
Each level sits in a grid whose row animates from 0 to its natural height with CSS, with no animation library and none at all under reduced motion. While it is closed it is inert and invisible, so Tab skips it and a screen reader doesn't read it, yet the fields stay mounted and keep what you set. Day is held the same way inside the second level: under Daily its space stays and the field can't be reached.
How does it work with a keyboard and a screen reader?
Each switch is named for its setting and Space flips it; turning one on adds its fields to the tab order straight after it, in reading order. The frequency is a labelled group of two choices, the selects are native, and the checkbox is named by its label and described by its hint. The foot is the one polite status region.
How does it look on a phone?
The levels keep their lines but the indent is small, the two selects share a row, and every control keeps its size. The sentence band and the foot follow, with the foot pinned to the bottom of the screen.
What stays local, and how do I connect it for real?
Nothing is sent: Save says "Saved 3 changes in this demo." To make it real, send the digest settings from the submit handler (send only the open levels if your server rejects the rest), update the saved copy from the answer and show a failure in the status line.