Silo

Function: SettingRow() ​

ts
function SettingRow(__namedParameters): Element;

Defined in: packages/sdk/src/SettingRow.tsx:58

The label + hint + control row every settings surface uses: title and dim description on the left, the control pinned right. Rows in a group are separated by hairline dividers.

Styled purely via host-provided .silo-setting-row* classes — no stylesheet import is needed in the extension.

Parameters ​

__namedParameters ​

label ​

string

hint? ​

string

enabled? ​

boolean

Gates dependent — a plain boolean, unrelated to whatever control children renders. Omit (or leave true) to leave dependent always enabled.

dependent? ​

ReactNode

Extra content rendered below the label+hint, in the same left column but its own row — sub-settings that only make sense while this row's own setting is on. Kept out of children's vertical centering (it sits below, not inside, the label+hint block children centers against). Rendered inside a native <fieldset>: when enabled is false, every focusable descendant is disabled automatically and the whole block dims — no need to thread disabled into each child by hand.

children? ​

ReactNode

The control — Switch, Select, Input, etc.

Returns ​

Element

Example ​

tsx
<SettingRow
  label="Format on save"
  hint="Run Format Document before writing to disk."
>
  <Switch
    checked={formatOnSave}
    onChange={setFormatOnSave}
    aria-label="Format on save"
  />
</SettingRow>

A row can also nest sub-settings that only make sense while its own setting is on, via enabled/dependent:

tsx
<SettingRow
  label="Collapse older agents"
  hint="Agents drop off into a collapsed section once older than the cutoff."
  enabled={staleDoneEnabled}
  dependent={
    <CheckboxRow
      label="Auto-expand on hover"
      checked={autoExpand}
      onChange={setAutoExpand}
    />
  }
>
  <Switch
    checked={staleDoneEnabled}
    onChange={setStaleDoneEnabled}
    aria-label="Collapse older agents"
  />
</SettingRow>

dependent renders inside a native <fieldset>, so when enabled is false every focusable descendant is disabled automatically and the whole block dims — no need to thread disabled into each child by hand. enabled is a plain boolean unrelated to whatever children renders (a Switch, a Select, or nothing at all) — nothing requires the row to have a toggle.