Settings List

Usage

import { SettingsGroup, SettingsRow } from "@tulipfarm/sprout/settings-list";

<SettingsGroup title="Profile" titleId="profile-heading">
  <SettingsRow label="Email" description="Used to sign in.">
    <span className="break-all">{user.email}</span>
  </SettingsRow>
  <SettingsRow
    label="Name"
    htmlFor="account-name"
    description={<span id="account-name-help">Up to 80 characters.</span>}
  >
    <Input id="account-name" aria-describedby="account-name-help" />
  </SettingsRow>
</SettingsGroup>

SettingsGroup renders a section with a title and a bordered panel. Pass titleId to name the section by its title; leave it out for lists that repeat, like one group per table. The title is anh2; set heading to "h3" or "h4" when the group sits under another heading.

SettingsRow takes a label, an optionaldescription, and children for the value or control. WithhtmlFor, the label is a real label, so clicking it focuses the control. A row without children has no control area, which suits read-only facts like a role or a directory entry.

Rows

Rows stack text over the control in narrow groups. From 36rem of group width, the control moves to the right and takes at most 60% of the row. Controls wrap; long text and codes break instead of overflowing.

Notes, forms, and alerts

<SettingsGroup title="Workspace identity" titleId="identity-heading">
  {!admin && <p className="px-[var(--sprout-settings-row-inline)] py-[var(--sprout-settings-row-block)]">
    Only workspace admins can rename or close this workspace.
  </p>}
  <form onSubmit={save}>
    <SettingsRow label="Workspace name" htmlFor="workspace-name">…</SettingsRow>
    {dirty && <div className="flex justify-end gap-2 px-4 pb-3">…</div>}
  </form>
  {saved && <p role="status">Workspace name saved.</p>}
</SettingsGroup>

Any child can sit in a group, and every child gets a divider above it. Children that render nothing add no divider. Notes and blocks can match row padding with --sprout-settings-row-inline and--sprout-settings-row-block. Pick the Workspace and Account pages in the playground to see forms, save messages, a conflict alert, and loading or error states inside rows.

Accessibility

Name controls with htmlFor, or pass your ownlabel element as the label. Link help text witharia-describedby by giving the description an id. The list has no motion of its own. Switches, checkboxes, the text field, and the theme toggle in these examples are docs-only stand-ins; data and saving are sample code.