Selectable Row — cinder playground

Overview

Full-width row with a native button or link primary action and independent trailing controls.

Use SelectableRow when activating the main row body opens or selects an item while Rename, menu, or external-link controls need their own Tab stops. The primary action contains the leading, title, description, and metadata regions; trailingActions renders beside it rather than inside it, so the resulting HTML never nests interactive elements.

Choose ActionRow when the entire row is one button and its trailing content is non-interactive. Choose StackedListItem when the row is static and only its title needs to link.

Usage

<script lang="ts">
  import Button from '@lostgradient/cinder/button';
  import SelectableRow from '@lostgradient/cinder/selectable-row';

  let opened = $state(0);
  let renamed = $state(0);
</script>

<div style="display: grid; gap: var(--cinder-space-3); max-inline-size: 48rem;">
  <SelectableRow
    selected
    onclick={() => {
      opened += 1;
    }}
  >
    {#snippet leading()}<span aria-hidden="true">●</span>{/snippet}
    {#snippet title()}
      Customer onboarding workflow investigation with a deliberately long session title
    {/snippet}
    {#snippet description()}Inspect the active workflow execution and event history.{/snippet}
    {#snippet meta()}Running · Updated 2 minutes ago{/snippet}
    {#snippet trailingActions()}
      <Button
        size="sm"
        onclick={() => {
          renamed += 1;
        }}>Rename</Button
      >
      <Button
        size="sm"
        href="https://example.com/temporal/session"
        target="_blank"
        rel="noopener noreferrer">Temporal Web</Button
      >
    {/snippet}
  </SelectableRow>

  <output data-testid="selectable-row-activation-counts">
    Opened {opened} times; renamed {renamed} times.
  </output>
</div>

CSS Variables

Override these variables on the SelectableRow root with the style prop or a stylesheet rule targeting a custom class.

--cinder-selectable-row-column-gap
--cinder-selectable-row-content-gap
--cinder-selectable-row-leading-gap
--cinder-selectable-row-padding-block
--cinder-selectable-row-padding-inline
--cinder-selectable-row-trailing-actions-gap

Live preview

When to use

Use when

The main row body must activate as one native action while rename, menu, or external-link controls remain independently focusable.
A rich row needs leading, title, description, and metadata regions plus multiple trailing controls.

Avoid when

The entire row is one button with no interactive trailing content. Use Action Row instead
Only the title links and the rest of the row is static record content. Use Stacked List Item instead

Examples

Session row with independent actions

The full main body opens the session while Rename and Temporal Web remain sibling actions with their own Tab stops.

Props

Props for selectable-row
Name	Type	Default	Description
`density`	`'comfortable' \| 'condensed'`	`'comfortable'`	Density token surfaced as `data-cinder-density`.
`selected`	`boolean`	`false`	Whether the primary action represents the selected or current row.
`selectedState`	`'pressed' \| 'current'`	`'pressed'`	Accessible state mapping for selected button rows.
`href`	`discriminated-union`
`currentValue`	`'page'\|'step'\|'location'\|'date'\|'time'\|'true'`	`'true'`	`aria-current` value emitted when `selectedState="current"` and the row is selected.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type.
`leading`	`snippet`		Leading visual such as an icon, avatar, marker, or status dot.
`title` required	`snippet`		Primary row label. Required so the native action has visible text and an accessible name.
`description`	`snippet`		Secondary description below the title.
`meta`	`snippet`		Tertiary metadata such as a timestamp, status, or compact badge.
`trailingActions`	`snippet`		Independent controls rendered as siblings after the primary action.
`style`	`text`		Inline style string applied to the `.cinder-selectable-row` root.

SelectableRow