A Description list renders one native dl. Each tp-description-list-item names its value with label and holds the value as content. Place items directly inside the list, in reading order; other children are not shown.
Values
A value can be any content: text, a link, or components such as a Badge, a Time or a Copy button. Set layout="stacked" on one item to run a long value under its label.
Record details
Default density
Compact density
Restart from the initial state
Show the copyable source
In a vertical list, inline labels share one column whose width follows the widest label, up to 40% of the list, so the values line up.
Long labels and values wrap, and the layout follows the writing direction.
Show more
limit is the number of items shown while the list is closed. A link-style Show more button below the list reveals the rest, which expand into place, and then reads Show less. Hidden items are not shown, focusable or announced. Set default-open to start open, or control open yourself.
Without a limit, with a limit below one, or with no more items than the limit, every item shows and there is no button.
In a vertical list hidden items keep their place in the layout below the visible ones, so their labels count toward the label column and opening the list never moves the values above. In a horizontal list they take no space until the list opens.
The button proposes each change through a cancelable tp-open-change event; call preventDefault() to keep the current state, or update open from onOpenChange. tp-open-change-complete follows once the items finish expanding or collapsing. disabled keeps the button from changing the state.
Show more
Default density
Compact density
Restart from the initial state
Show the copyable source
messages sets the button text. Each message is a string or a function that receives the number of hidden items and the total, as here. When a page has several lists, name each button specifically, such as “Show more billing details”.
Set hidden-until-found to let the browser’s find in page search hidden items: a match opens the list. While the list is closed, the browser does not lay hidden items out, so with this option their labels size the label column only once the list opens.
The Show more button is a native button named by its text, with an expanded state and a control relationship to the hidden items. Focus stays on the button when it opens or closes the list; the newly shown items come before it in reading and tab order.
Summary row
orientation="horizontal" places the pairs side by side and wraps them when space runs out. Combined with layout="stacked", which puts each label above its value, it suits a summary strip above a record.
Summary row
Default density
Compact density
Restart from the initial state
Show the copyable source
align="center" aligns each label to the end of its column so it meets its value in the middle. In narrow panels, layout="stacked" on the list places every label above its value.
Alignment and stacking
Default density
Compact density
Restart from the initial state
Show the copyable source
AttributePropertyTypeDefaultDescriptionlimitlimitnumber | nullnullMost Items shown while closed; unset, below one or not a number shows every Item.openopenbooleanfalseWhether the Items beyond the limit show.default-opendefaultOpenbooleanfalseInitial uncontrolled open state.hidden-until-foundhiddenUntilFoundbooleanfalseKeeps hidden Items available to find in page; a match opens the list.layoutlayoutDescriptionListLayout'inline'Label beside its Value (inline) or above it (stacked); an Item's own layout wins.alignalign'start' | 'center''start'Center aligns each Label toward its Value.
Properties
PropertyTypeDefaultDescriptionmessagesDescriptionListMessages{}Trigger text: strings, or functions of the hidden and total Item counts.onOpenChange((event: TpOpenChangeEvent) => void) | undefined—Called with each accepted proposal to show or hide the items beyond the limit, after the tp-open-change event.itemsread-onlyreadonly TpDescriptionListItem[]—The Items, in document order.hiddenCountread-onlynumber—Number of Items beyond the limit.listElementread-onlyHTMLElement | null—The native dl.viewportElementread-onlyHTMLElement | null—The region that clips the list to the visible Items while closed.triggerElementread-onlyHTMLButtonElement | null—The native button inside the composed trigger.
Events
EventTypeDescriptiontp-open-changeTpOpenChangeEventCancelable proposal to show or hide the Items beyond the limit.tp-open-change-completeCustomEvent<{ open: boolean; }>After the list finishes opening or closing.
Slots
SlotDescriptiondefaultThe Description list items, in reading order, as direct children.
CSS parts
PartDescription::part(description-list)The native description list.::part(description-list-indicator)The chevron of the Show more Button.::part(description-list-item)One label and value pair.::part(description-list-label)A term, holding the label.::part(description-list-trigger)The Show more Button that shows or hides the items beyond the limit.::part(description-list-trigger-label)The text of the Show more Button.::part(description-list-value)A description, holding the value.::part(description-list-viewport)The region that clips the list to the visible items while it is closed.
<tp-description-list-item>
Attributes
AttributePropertyTypeDefaultDescriptionlabellabelstring''The name of the value, presented as the term.layoutlayout'inline' | 'stacked' | nullnullPuts the label above the value (stacked), as for a long value, or beside it (inline); unset follows the list.