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.
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
When to use
- 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.
- 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
| Name | Type | Default | Required | Bindable | 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 | discriminated-union | '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 | discriminated-union | 'button' | Native button type. | ||
leading | snippet | Leading visual such as an icon, avatar, marker, or status dot. | |||
title | snippet | req | 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. |