Setting Row — Cinder component documentation

Overview

SettingRow arranges settings-page guidance and a control while publishing FormField context to composed Input, Toggle, or Select controls. It supports advisory, error, managed-policy, and optional disclosure content without duplicating those semantics at each call site.

Usage

<script lang="ts">
  import { Input } from '@lostgradient/cinder';
  import { SettingRow } from '@lostgradient/cinder';
</script>

<SettingRow id="display-name" label="Display name" description="Shown to collaborators.">
  {#snippet control()}
    <Input id="display-name" value="" placeholder="Ada Lovelace" />
  {/snippet}
</SettingRow>

SettingRow requires a stable id, label, and control snippet. warning is advisory and error is corrective; FormField renders both messages itself as siblings of the control, and exposes only warningId/errorId/describedBy/invalid through context—a custom control that reads that context associates with the messages, it doesn't receive their text. Use managed with PolicyLock when a policy owns the value. The row does not save settings or disable a control automatically—pass disabled to the row or control when the host is submitting or unavailable.

Live preview

Display name

Shown to collaborators.

When to use

Use when

Pairing a setting label and guidance with an Input, Toggle, or Select control.

Avoid when

The control belongs in a conventional stacked form field.

Examples

Settings row

Compose a labelled setting control with guidance.

Props

Props for setting-row
Name	Type	Default	Description
`id` required	`text`		Stable id forwarded into `FormField` context, which associates the generated `<label for={id}>` with it. Only a control that opts into and reads that context receives `id` automatically—for a native element or a third-party component that doesn't, the label is unassociated unless the host also applies `id` to that control directly, the same qualification as `required` and `disabled`.
`label` required	`text`		Visible setting label.
`description`	`text`		Guidance text describing the setting.
`warning`	`text`		Advisory message. `FormField` renders this text itself, as a sibling of the control, not through context—a custom `control` that reads `FormField` context sees only the derived `warningId` (and the composed `describedBy`) to associate with, never the message string itself.
`error`	`text`		Corrective error message. `FormField` renders this text itself, as a sibling of the control, not through context—a custom `control` that reads `FormField` context sees only the derived `errorId`, `invalid`, and the composed `describedBy`, never the message string itself.
`required`	`boolean`	`false`	Renders the required marker and forwards `required` into `FormField` context. Only takes effect for a control that opts into and reads that context—it never adds a native `required` attribute, so a control that doesn't consume the context still passes browser constraint validation and must receive `required` directly. `SettingRow` forwards `undefined` when omitted; `FormField` normalizes that to `false`. Defaults to `false`.
`disabled`	`boolean`	`false`	Forwards a disabled state into `FormField` context for the row's control. Only takes effect for a control that opts into and reads that context—a native element or a third-party component that doesn't consume it stays interactive and must receive `disabled` directly. Does not disable automatically while saving. `SettingRow` forwards `undefined` when omitted; `FormField` normalizes that to `false`. Defaults to `false`.
`managed`	`FormFieldManaged`		Renders a managed-policy indicator; pair with `PolicyLock`.
`control` required	`snippet`		The setting's control, rendered with `FormField` context applied.
`disclosure`	`snippet`		Optional disclosure content rendered beneath the row.