Settings List

Settings List builds preference and account pages where each row is one setting with a switch, select, input or action button. It wires the labels and descriptions to the control and handles the responsive stacking.

Install

bashnpx shadcn@4.18.0 add @siteplane/settings-list

Import it from @/siteplane/components/settings-list. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

• vs Data List: Pick Data List when the rows only show values and nothing is editable.
• vs Card: Pick a plain Card when the content is not a set of individual settings.

Rules

• Give SettingsList a title (set titleLevel to fit the page outline) and give each SettingsListItem a title.
• Render the control in the control render prop and spread every prop it receives so the label and description stay linked.
• Give buttons like Change or Manage only aria-describedby, so their visible text stays the accessible name.
• Keep values, saving and validation in your app state; the list only draws the layout.
• Use layout="inline" for small controls like switches and leave wide text controls on the default responsive layout.

Reference

• Settings List docs, with every prop, part and example (Markdown)
• Siteplane UI 1.8.1, Data display. Read the installed source under src/siteplane before relying on an API.