Data Display

InspectorRow

One property row of an inspector: a muted label, a value and a trailing affordance; an editable row opens an inline editor or a popover on activation and commits or cancels from the keyboard.

import { InspectorRow } from '@lostgradient/cinder';
propertieseditablerow
01

Overview

Reference usage

InspectorRow is one property row of an Inspector: a muted label in a fixed 140px column, the value in the default text colour, then a trailing affordance. Each row is at least 44px tall, and below 700px the label stacks above the value.

A row is read-only unless it has a kind or an editor. An editable row draws a trailing chevron (a small switch for a toggle) and a hover tint, and activating it opens the editor:

  • kind="text", kind="date" and kind="select" open an inline editor in place of the value. Enter commits, Escape cancels, and leaving a field commits.
  • kind="toggle" has no editor: activating the row commits the opposite of current.
  • An editor snippet opens a popover anchored to the value. It receives commit and cancel, and Escape or an outside press cancels.

The row never holds the value itself: it calls onCommit with the new value and the page decides whether to keep it, so value and current are whatever the page holds.

Usage

svelte 
<script lang="ts">
  import { Inspector, InspectorRow } from '@lostgradient/cinder';

  let due = $state('2026-11-30');
  let notify = $state(true);
</script>

<Inspector header="Details">
  <InspectorRow label="Due" kind="date" current={due} onCommit={(next) => (due = String(next))}>
    {#snippet value()}{due}{/snippet}
  </InspectorRow>
  <InspectorRow
    label="Notify"
    kind="toggle"
    current={notify}
    onCommit={(next) => (notify = next === true)}
  >
    {#snippet value()}{notify ? 'On' : 'Off'}{/snippet}
  </InspectorRow>
</Inspector>

Suggested values

suggested marks a value the product drafted that is not saved until the person confirms it. The row says so in words: a quiet "Suggested" label in the accent text colour on a line under the row's label, which suggestedLabel can change, for example to "Suggested wording". The label is part of the term, so an editable row's name reads it too. The row keeps its own surface: no tint, no dashed or accent border and no pill.

svelte 
<script lang="ts">
  import { Inspector, InspectorRow } from '@lostgradient/cinder';
</script>

<Inspector header="Details">
  <InspectorRow label="Context" suggested>
    {#snippet value()}Phone{/snippet}
  </InspectorRow>
</Inspector>
Live preview

A custom editor in a popover

Details

Owner
Created
Nov 10, 2026

02

When to use

Use when
  • Showing one property of a record as a quiet row that becomes a text, select, date or toggle editor on activation.
  • Opening a custom editor, such as a picker, in a popover anchored to the row's value.
Avoid when
  • The value is read-only and needs no affordance at all — use description-list.
  • The control belongs beside a setting's description and save status — use setting-row.
03

Examples

A custom editor in a popover

An editor snippet opens in a popover anchored to the value and ends the edit with commit or cancel. A disabled row is read-only.

04

Props

Props for inspector-row
Name
Type
Default
Description
label required text The row's label, drawn muted in a fixed-width column.
icon snippet An optional icon drawn before the label.
value required snippet The row's value, as it reads at rest.
kind 'text' | 'select' | 'date' | 'toggle' The built-in editor an activation opens. Leave it unset, with no editor, for a read-only row. A toggle row has no editor: activating it commits the opposite of current.
current text The value an editor starts from: the text of a text, select or date row, or the state of a toggle.
options InspectorRowOption[] [] The choices of a select row.
editor snippet A custom editor, shown in a popover anchored to the row's value. It wins over kind.
editLabel text The accessible name of the editor. Left unset, it reads "Edit" and the label.
disabled boolean false Draws the row as read-only, even when it has an editor.
suggested boolean false Marks the value as a suggestion that is not saved until the person confirms it: a quiet accent text label under the row's label, with no tint, border or pill.
suggestedLabel text 'Suggested' The words of the suggested label, such as "Suggested wording". Used with suggested.
onCommit (next: InspectorRowValue | undefined) => void Called when an edit is committed: with Enter, by leaving a field, by picking an option, by activating a toggle, or by a custom editor's commit.
onCancel () => void Called when an edit is cancelled: with Escape, by activating the row again, or by dismissing the popover.