SettingsSection

Profile settings

Display name

Shown on comments and assignments.

Show my status

import { Button, Input, SettingsRow, SettingsSection, Switch } from '@rookcom/monarch-react';

<SettingsSection
  title="Profile"
  description="How you appear to your teammates."
  actions={<Button variant="primary">Save</Button>}
>
  <SettingsRow
    label="Display name"
    description="Shown on comments and assignments."
    required
  >
    <Input defaultValue="Ada Lovelace" />
  </SettingsRow>
  <SettingsRow label="Show my status">
    <Switch defaultChecked />
  </SettingsRow>
</SettingsSection>

Usage examples

Save footer with dirty state

import { useState } from 'react';
import { Input, SettingsRow, SettingsSection, Switch } from '@rookcom/monarch-react';

function DirtyDemo() {
  const [saved, setSaved] = useState({ name: 'Northfield', digest: true });
  const [draft, setDraft] = useState(saved);
  const [saving, setSaving] = useState(false);
  const dirty = draft.name !== saved.name || draft.digest !== saved.digest;
  return (
    <SettingsSection
      title="Workspace"
      description="Name and notifications for everyone in this workspace."
      dirty={dirty}
      saving={saving}
      onCancel={() => setDraft(saved)}
      onSave={() => {
        setSaving(true);
        setTimeout(() => {
          setSaved(draft);
          setSaving(false);
        }, 800);
      }}
    >
      <SettingsRow label="Workspace name">
        <Input value={draft.name} onChange={(e) => setDraft({ ...draft, name: e.target.value })} />
      </SettingsRow>
      <SettingsRow label="Weekly digest" description="A summary email every Monday.">
        <Switch
          checked={draft.digest}
          onCheckedChange={(digest) => setDraft({ ...draft, digest })}
        />
      </SettingsRow>
    </SettingsSection>
  );
}

<DirtyDemo />

Danger zone

import { Button, SettingsActionRow, SettingsSection } from '@rookcom/monarch-react';

<SettingsSection
  title="Danger zone"
  description="These actions affect everyone in the workspace."
  tone="danger"
>
  <SettingsActionRow
    title="Transfer ownership"
    description="Make another admin the owner. You stay an admin."
    action={<Button>Transfer</Button>}
  />
  <SettingsActionRow
    title="Delete workspace"
    description="Removes every project, file and member. This can’t be undone."
    action={<Button variant="danger">Delete workspace</Button>}
  />
</SettingsSection>

Loading and no access

import { SettingsSection } from '@rookcom/monarch-react';

<div style={{ display: 'grid', gap: '1rem', width: '100%' }}>
  <SettingsSection title="Payroll" state="loading">
    {null}
  </SettingsSection>
  <SettingsSection
    title="Security"
    state="no-access"
    noAccessDescription="Ask a workspace admin to change security settings."
  >
    {null}
  </SettingsSection>
</div>

Purpose

Groups related settings under a heading and description, in a card. SettingsRow lays out one setting and wires its label, description and error to the control; SettingsActionRow lays out one action such as "Delete workspace". The footer can be the standard Save/Discard bar driven by a dirty flag.

Use when

Settings and preferences pages.
A form section that saves as a unit and should say when it has unsaved changes.
A destructive zone (delete, transfer) with tone="danger" and SettingsActionRow.

Avoid when

Data-entry forms that are not settings: use Field directly.
Settings that apply immediately (a single switch list): use SwitchSettingsList.

Design principles

Label and help on one side, control on the other, so long settings pages scan quickly.
Each row is a Field, so accessibility wiring is automatic.
Save/Discard live in the section footer, not per row, and stay disabled until something changed.
The product owns the draft and the save; the section only shows the state it is given.

API reference

import { SettingsActionRow, SettingsRow, SettingsSection } from '@rookcom/monarch-react';

Export	Kind	Rendering	Root class
`SettingsActionRow`	component	client	`.mn-settings-section`
`SettingsRow`	component	client	`.mn-settings-section`
`SettingsSection`	component	client	`.mn-settings-section`

SettingsSection renders a <section> labelled by its heading; native attributes pass through.

SettingsRow is a Field: the control child receives the label, description, required, disabled and invalid wiring. invalid defaults to true when error is given.

With onSave, the footer is a polite status line, any actions, Discard (onCancel) and Save. Without it, the footer is actions alone, as before.

SettingsActionRow renders a row with a title, description and an action node; it is not a form field.

Generated from the TypeScript declarations of packages/react/src/patterns/layout/settings-section.

Properties

`SettingsActionRow`

One action in a settings card: title and consequence on the left, a button on the right. Used for danger-zone items (transfer, archive, delete) where the row is not a form control.

Prop	Type	Description
`action` required	`ReactNode`	The button that starts the action, usually opening a ConfirmDialog.
`title` required	`ReactNode`	What the action does ("Delete workspace").
`children`	`ReactNode`
`className`	`string`
`description`	`ReactNode`	The consequence, in one or two sentences.
`id`	`string`

`SettingsRow`

One setting: label and description on the left, control on the right.

Prop	Type	Description
`children` required	`ReactNode`	The control: Input, Select, Switch, Combobox. It receives the Field ids.
`label` required	`ReactNode`	Label of the setting; becomes the control's label.
`className`	`string`
`description`	`ReactNode`
`disabled`	`boolean`
`error`	`ReactNode`	Error message rendered under the control.
`id`	`string`	Pass `id` to match an existing control id.
`invalid`	`boolean`
`required`	`boolean`