# Settings sections

> Grouped switch rows revealed inside each panel.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/accordion-15).

- Page, with a live preview: https://shadcn.exchange/r/flx/accordion-15
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/accordion-15-light-79a8f8c18bf36d95.png
- Registry item: https://ui.flexnative.com/r/accordion-15.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/accordion-15.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `accordion`, `switch`, `label`

## Files

### `registry/patterns/accordion/accordion-15.tsx`

```tsx
import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from '@/components/ui/accordion'
import { Label } from '@/components/ui/label'
import { Switch } from '@/components/ui/switch'

const groups = [
  {
    value: 'email',
    title: 'Email notifications',
    rows: [
      { id: 'email-product', label: 'Product updates', checked: true },
      { id: 'email-security', label: 'Security alerts', checked: true },
      { id: 'email-marketing', label: 'Marketing', checked: false },
    ],
  },
  {
    value: 'push',
    title: 'Push notifications',
    rows: [
      { id: 'push-mentions', label: 'Mentions', checked: true },
      { id: 'push-comments', label: 'Comments', checked: false },
    ],
  },
]

export function Accordion15() {
  return (
    <Accordion defaultValue={['email']} className="w-full max-w-md">
      {groups.map((group) => (
        <AccordionItem key={group.value} value={group.value}>
          <AccordionTrigger>{group.title}</AccordionTrigger>
          <AccordionContent>
            <div className="flex flex-col gap-4">
              {group.rows.map((row) => (
                <div key={row.id} className="flex items-center justify-between">
                  <Label htmlFor={row.id} className="font-normal">
                    {row.label}
                  </Label>
                  <Switch id={row.id} defaultChecked={row.checked} />
                </div>
              ))}
            </div>
          </AccordionContent>
        </AccordionItem>
      ))}
    </Accordion>
  )
}
```