List

<oblyx-list> lays out <oblyx-list-item> rows in document order, as a real <ul> or <ol>. Each item carries an optional leading icon, a label, a description, and an optional trailing content region for something like a badge or a button.

Basic list

HTML

Kotlin

<oblyx-list>
  <oblyx-list-item label="Checkout redesign" description="Updated 2 hours ago" icon="clock"></oblyx-list-item>
  <oblyx-list-item label="Billing migration" description="Updated yesterday" icon="clock"></oblyx-list-item>
  <oblyx-list-item label="Onboarding flow" description="Updated 3 days ago" icon="clock"></oblyx-list-item>
</oblyx-list>

oblyxList {
  oblyxListItem(label = "Checkout redesign", description = "Updated 2 hours ago", icon = OblyxIconName.CLOCK)
  oblyxListItem(label = "Billing migration", description = "Updated yesterday", icon = OblyxIconName.CLOCK)
  oblyxListItem(label = "Onboarding flow", description = "Updated 3 days ago", icon = OblyxIconName.CLOCK)
}

Ordered lists and markers

ordered renders <ol> with native decimal numbering instead of <ul>. marker picks an unordered glyph, disc or circle; it has no effect while ordered is set, since an ordered list always uses native numbering. Neither renders a marker element in the DOM: both are plain CSS list-style values.

Ordered list and a disc marker

HTML

Kotlin

<oblyx-list ordered>
  <oblyx-list-item label="Verify payment details"></oblyx-list-item>
  <oblyx-list-item label="Confirm shipping address"></oblyx-list-item>
  <oblyx-list-item label="Review order summary"></oblyx-list-item>
</oblyx-list>
<oblyx-list marker="disc">
  <oblyx-list-item label="Two-factor authentication"></oblyx-list-item>
  <oblyx-list-item label="Single sign-on"></oblyx-list-item>
</oblyx-list>

oblyxList(ordered = true) {
  oblyxListItem(label = "Verify payment details")
  oblyxListItem(label = "Confirm shipping address")
  oblyxListItem(label = "Review order summary")
}
oblyxList(marker = OblyxListMarker.DISC) {
  oblyxListItem(label = "Two-factor authentication")
  oblyxListItem(label = "Single sign-on")
}

Density, dividers, and a header

density and dividers, set on <oblyx-list>, cascade to every <oblyx-list-item> inside it through CSS, the same descendant-selector pattern <oblyx-breadcrumbs> uses for its own children. header renders an optional heading above the list and also becomes the list's accessible name.

Compact list with dividers and a header

HTML

Kotlin

<oblyx-list header="Recent projects" density="compact" dividers>
  <oblyx-list-item label="Checkout redesign"></oblyx-list-item>
  <oblyx-list-item label="Billing migration"></oblyx-list-item>
  <oblyx-list-item label="Onboarding flow"></oblyx-list-item>
</oblyx-list>

oblyxList(header = "Recent projects", density = OblyxDensity.COMPACT, dividers = true) {
  oblyxListItem(label = "Checkout redesign")
  oblyxListItem(label = "Billing migration")
  oblyxListItem(label = "Onboarding flow")
}

Interactive items

An item with href renders a real <a>; an item with no href renders a plain <span>. There is deliberately no button form: a list item is either a link to somewhere else, or static text, never a click handler with no destination. selected marks the current item with aria-current="true" rather than aria-selected, since aria-selected is not legal ARIA on a plain list item. disabled only takes effect together with href, since a non-interactive row has nothing to disable.

Linked items, one selected

HTML

Kotlin

<oblyx-list>
  <oblyx-list-item
    label="Checkout redesign"
    description="Owned by Priya Shah"
    href="/projects/checkout-redesign"
    icon="chevronRight"
  ></oblyx-list-item>
  <oblyx-list-item
    label="Billing migration"
    description="Owned by Marcus Webb"
    href="/projects/billing-migration"
    selected
    icon="chevronRight"
  ></oblyx-list-item>
  <oblyx-list-item label="Archived project" description="No longer editable"></oblyx-list-item>
</oblyx-list>

oblyxList {
  oblyxListItem(
    label = "Checkout redesign",
    description = "Owned by Priya Shah",
    href = "/projects/checkout-redesign",
    icon = OblyxIconName.CHEVRON_RIGHT,
  )
  oblyxListItem(
    label = "Billing migration",
    description = "Owned by Marcus Webb",
    href = "/projects/billing-migration",
    selected = true,
    icon = OblyxIconName.CHEVRON_RIGHT,
  )
  oblyxListItem(label = "Archived project", description = "No longer editable")
}

Trailing content

The one rich content region beyond icon, label, and description is trailing content: whatever markup the caller nests inside the item, such as a status badge or an action button. It renders as a sibling of the row's main link or span, not nested inside it, so trailing interactive content such as a button stays independently focusable rather than creating a link inside a link.

Trailing badge and button

In review

HTML

Kotlin

<oblyx-list>
  <oblyx-list-item label="Checkout redesign" description="3 open tasks">
    <oblyx-badge variant="warning">In review</oblyx-badge>
  </oblyx-list-item>
  <oblyx-list-item label="Billing migration" href="/projects/billing-migration">
    <oblyx-button variant="ghost" icon-only label="More options">
      <oblyx-icon name="moreHorizontal"></oblyx-icon>
    </oblyx-button>
  </oblyx-list-item>
</oblyx-list>

oblyxList {
  oblyxListItem(label = "Checkout redesign", description = "3 open tasks") {
    oblyxBadge(variant = OblyxBadgeVariant.WARNING) { +"In review" }
  }
  oblyxListItem(label = "Billing migration", href = "/projects/billing-migration") {
    oblyxButton(variant = OblyxButtonVariant.GHOST, iconOnly = true, label = "More options") {
      oblyxIcon(name = OblyxIconName.MORE_HORIZONTAL)
    }
  }
}

Markers need `display: list-item`

<oblyx-list-item> is not a real <li>: it is a custom element styled with display: list-item, which is what actually drives marker and counter generation per the CSS Display spec, independent of the element's tag name. This is also why ordered numbering and marker work with no JavaScript rendering a marker glyph. A consumer that overrides display on <oblyx-list-item>, for example to flex for a custom layout, loses the marker and the numbering along with it, since neither combines with display: list-item.

Reference

`<oblyx-list>`

Attribute	Type	Default	Description
`ordered`	`boolean`	`false`	Renders as `<ol>` with native numbering instead of `<ul>`.
`marker`	`nonedisccircle`	`none`	Marker glyph for an unordered list. Has no effect while `ordered` is set, since an ordered list always uses native decimal numbering.
`density`	`compactbalancedspacious`	`balanced`	Row spacing shared by every `<oblyx-list-item>` inside this list.
`dividers`	`boolean`	`false`	Draws a divider line between adjacent items.
`header`	`string \| undefined`	–	Optional heading rendered above the list. Also becomes the list's accessible name via `aria-labelledby` when set.

`<oblyx-list-item>`

Attribute	Type	Default	Description
`label`	`string \| undefined`	–	Visible row text and default accessible name. Required.
`description`	`string \| undefined`	–	Optional secondary line under the label.
`icon`	`closechevronDownchevronLeftchevronRightchevronsLeftchevronsRightchecksuccesserrorwarninginfocalendarclockexternalLinkmenumoreHorizontalsearcharrowUparrowDownarrowsUpDownfunneleyeSlashviewColumnscopycheckDoublewrenchstopmicrophone`	–	`oblyx-icon` registry name, rendered before the label.
`href`	`string \| undefined`	–	Link destination. Renders the row as a real `<a>`. Omitted from the rendered link when `disabled`. Absent entirely renders a non-interactive row.
`disabled`	`boolean`	`false`	Disables the item. Only takes effect together with `href`, since a non-interactive row has nothing to disable.
`selected`	`boolean`	`false`	Marks this row as the current selection. Sets `aria-current="true"` rather than `aria-selected`, since `aria-selected` is not legal ARIA on a plain list item.

List

Ordered lists and markers

Density, dividers, and a header

Interactive items

Trailing content

Markers need display: list-item

Reference

<oblyx-list>

<oblyx-list-item>

Markers need `display: list-item`

`<oblyx-list>`

`<oblyx-list-item>`