Forms
Toggle Switch Row
Stacked list of labeled on/off switches for notification preferences, built on native checkboxes with zero JS.
$ velocityx add toggle-switch-rowBuilt for astro.
Full docs for Toggle Switch Row →
Email notifications
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| rows | ToggleRow[] | No | [ { name: 'email_updates', label: 'Product updates', description: 'New features and improvements', defaultChecked: true }, { name: 'email_marketing', label: 'Marketing emails', description: 'Tips, offers, and promotions' }, { name: 'email_security', label: 'Security alerts', description: 'Sign-ins and account changes', defaultChecked: true, disabled: true }, ] | |
| heading | string | No | 'Email notifications' | |
| className | string | No | '' |
File this creates
The CLI writes this path into your project, relative to its root — nothing else moves.
components/velocity/toggle-switch-row/ToggleSwitchRow.astroUsing the Toggle Switch Row component
Install it with velocityx add toggle-switch-row.
The CLI writes the source straight into your project — no runtime dependency, no registry
lock-in, and it themes itself from the same primary-*/accent-* scale as the rest of the library.
Related components
More from Forms.
Multi-select add-on cards with the radio-card visual language but native checkbox semantics, zero JS.
astroSingle-column name/email/subject/message contact form with a honeypot field, Netlify Forms opt-in, and a presentational action prop.
astroTwo-column contact layout with a named aside slot for a map or office photo, stacking to one column on mobile.
astroVertical catalog filter stack with collapsible checkbox groups and a price range, built on native details elements.
astro