## Settings List (S—133)

An iOS-style grouped settings list mixing switches, value rows with chevrons, inline selects and a destructive row.

- URL: https://sundaeui.dev/components/settings-list
- Category: Forms & inputs · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/settings-list.json`
- Tags: form, settings, preferences, list, switch, ios

One component for the common row types: a switch, a row that shows its current value and navigates, a compact inline select, and a red-flag destructive action that asks once.
Rows group into inset cards with section headers and footnotes, and every row is a full-width hit target.

### Usage

```tsx
import { SettingsList } from '@/components/sundae/settings-list'

<SettingsList />
```

### Props

- `sections` (`SettingsSection[]`, required): Sections with title, footnote and rows (switch | link | select | danger).
- `onChange` (`(id: string, value: unknown) => void`): Called when a row changes.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Mobile settings, account preferences, app configuration.

### When not to use

- Dense admin forms with many inputs per row.

### Accessibility

- Switch rows use role="switch"; link rows are buttons that name their current value; selects are native.
- The destructive row asks for confirmation inline and announces the result.
- Reduced motion removes the movement and keeps every state change.