List

yarn add @clayui/list

Lists are a visual representation of a dataset, based on groups of related content, that is organized vertically.

Stable 3.3.4 View in Lexicon CHANGELOG

QuickActionMenu
ClayList children
API

A list can composable by a Header, an Item and Quick Actions.

This is a header
Item 1
ItemField
Item Title and expanded
Item Text
ItemField
Item 2
Item Title and expanded
Hover this item for action menu
This is another header
Item 3
ItemField

Code Sample (expand to see it)

QuickActionMenu

Use QuickActionMenu composition inside Item for defining a QuickActionMenu.

Wrap QuickActionMenu.Item inside QuickActionMenu for defining an Item of QuickActionMenu. See the following example:

Item 1
Hover this item for quick action menu

Code Sample (expand to see it)

ClayList children

To ensure your html structure is accessible, make sure any children passed to ClayList are li elements. Both ClayList.Item and ClayListHeader are li elements.

API

ClayList

Property	Type	Required	Default	Description
children	TLIAttributes \| Array<TLIAttributes>	false
showQuickActionsOnHover	boolean	false	true

Extends from React.HTMLAttributes<HTMLLIElement>

ClayList.Item

Property	Required	Default
action	false	false
active	false	false
disabled	false	false
flex	false	false
header	false	false

ClayList.ItemField

[APITable "clay-list/src/ItemField.tsx"]

ClayList.ItemText

Property	Type	Required	Default	Description
subtext	boolean	false		Flag to indicate if content should be styled as subtext.

ClayList.ItemTitle

Extends from React.HTMLAttributes<HTMLHeadingElement>

ClayList.QuickActionMenu

Extends from React.HTMLAttributes<HTMLDivElement>

ClayList.QuickActionMenu.Item

Property	Type	Required	Description
href	string	false	Value of path the item should link to.
spritemap	string	false	Path to icon spritemap.
symbol	string	true	Name of icon symbol

ClayListWithItems

Property	Type	Required	Default	Description
itemIdentifier	string \| 'id'	false	'id'	Property of item that makes it unique from other items. Defaults to 'id'.
items	Array<IListItem>	false	[]	Items to show in list.
onSelectedItemsChange	(map: IBooleanMap) => void	false		Callback for when selected items change.
selectedItemsMap	IBooleanMap	false	{}	Map of items that are currently selected.
spritemap	string	false		Path to spritemap for icon symbol.

Example
Variations
Group Elements
- Header
- Items

Check the Lexicon List Pattern for a more in-depth look at the motivations and proper usage of this component.

List sections help separate content by a specific category or type.

Example

Align content inside a .list-group-item element with a flexbox with .list-group-item-flex.

Use a combination of .flex-col and .flex-col.flex-col-expand to control the size of each cell.

Add the class show-dropdown-action-on-active to display dropdown-menus when active in List Groups.

Direct descendants of flex-col become block level elements by default. See https://www.w3.org/TR/css-flexbox-1/#flex-items. If you want to display content using floats, inline, or inline-block, wrap the content with a block level element such as a div.

List Section
Account Example One

Second Level Text

Approved
- Remove
- Edit
- Move
- Checkout
Account Example One

Second Level Text

Approved
- Remove
- Edit
- Move
- Checkout

Code Sample (expand to see it)

<ul class="list-group show-quick-actions-on-hover">
	<li class="list-group-header">
		<h3 class="list-group-header-title">List Section</h3>
	</li>
	<li class="list-group-item list-group-item-flex">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox" />
					<span class="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				<span class="inline-item">
					...
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<p class="list-group-title text-truncate">
				<a href="#1">Account Example One</a>
			</p>
			<p class="list-group-subtitle text-truncate">Second Level Text</p>
			<div class="list-group-detail">
				<span class="label label-success">
					<span class="label-item label-item-expand">Approved</span>
				</span>
			</div>
		</div>
		<div class="autofit-col">
			<div class="quick-action-menu">
				<a
					class="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
				<a
					class="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
				<a
					class="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
			</div>
			<div class="dropdown dropdown-action">
				...
			</div>
		</div>
	</li>
	<li class="list-group-item list-group-item-flex active">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				<label>
					<input
						checked
						class="custom-control-input"
						type="checkbox"
					/>
					<span class="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				<span class="inline-item">
					...
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<p class="list-group-title">
				<a href="#1">Account Example One</a>
			</p>
			<p class="list-group-subtitle">Second Level Text</p>
			<div class="list-group-detail">
				<span class="label label-success">
					<span class="label-item label-item-expand">Approved</span>
				</span>
			</div>
		</div>
		<div class="autofit-col">
			<div class="quick-action-menu">
				<a
					class="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
				<a
					class="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
				<a
					class="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
			</div>
			<div class="dropdown dropdown-action">
				...
			</div>
		</div>
	</li>
</ul>

Variations

Bordered

Use .list-group-bordered on .list-group to style .list-group-item-flex like a table.

Text Truncate Example

.list-group-subtitle

.list-group-subtitle a

This is an example of .list-group-text and a link.

a.list-group-text-link

Truncated a.list-group-text-link and another link

This is .list-group-subtext and a link.

Regular a.list-group-subtext-link

Truncated a.list-group-subtext-link and another link

Pending
- Remove
- Download
- Checkout
Account Example Two

List Group Subtext

Info
- Remove
- Download
- Checkout

Code Sample (expand to see it)

<ul class="list-group list-group-bordered">
	<li class="list-group-item list-group-item-flex">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox" />
					<span class="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				<span class="inline-item">
					...
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<section class="autofit-section">
				<div class="list-group-title">
					<span class="text-truncate-inline">
						<a class="text-truncate" href="#1"
							>Text Truncate Example</a
						>
					</span>
				</div>
				<p class="list-group-subtitle">.list-group-subtitle</p>
				<p class="list-group-subtitle">
					<a href="#1">.list-group-subtitle a</a>
				</p>
				<p class="list-group-text">
					This is an example of .list-group-text and a
					<a href="#1">link</a>.
				</p>
				<p class="list-group-text">
					<a class="list-group-text-link" href="#1"
						>a.list-group-text-link</a
					>
				</p>
				<p class="list-group-text">
					<span class="text-truncate-inline">
						<a class="list-group-text-link text-truncate" href="#1"
							>Truncated a.list-group-text-link</a
						>
						and another <a href="#1">link</a>
					</span>
				</p>
				<p class="list-group-subtext">
					This is .list-group-subtext and a <a href="#1">link</a>.
				</p>
				<p class="list-group-subtext">
					<a class="list-group-subtext-link" href="#1"
						>Regular a.list-group-subtext-link</a
					>
				</p>
				<p class="list-group-subtext">
					<span class="text-truncate-inline">
						<a
							class="list-group-subtext-link text-truncate"
							href="#1"
							>Truncated a.list-group-subtext-link</a
						>
						and another <a href="#1">link</a>
					</span>
				</p>
				<div class="list-group-detail">
					<span class="label label-warning">
						<span class="label-item label-item-expand"
							>Pending</span
						>
					</span>
				</div>
			</section>
		</div>
		<div class="autofit-col">
			<div class="dropdown dropdown-action">
				...
			</div>
		</div>
	</li>
	<li class="list-group-item list-group-item-flex">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox" />
					<span class="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				<span class="inline-item">
					...
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<section class="autofit-section">
				<div class="list-group-title">
					<a href="#1">Account Example Two</a>
				</div>
				<p class="list-group-subtext">List Group Subtext</p>
				<div class="list-group-detail">
					<span class="label label-info">
						<span class="label-item label-item-expand">Info</span>
					</span>
				</div>
			</section>
		</div>
		<div class="autofit-col">
			<div class="dropdown dropdown-action">
				...
			</div>
		</div>
	</li>
</ul>

Default

Account Example One

Second Level Text
- Remove
- Edit
- Move
- Checkout

Code Sample (expand to see it)

<ul class="list-group">
	<li class="list-group-item list-group-item-flex">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox" />
					<span class="custom-control-indicator"></span>
				</label>
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				...
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<p class="list-group-title text-truncate">
				<a href="#1">Account Example One</a>
			</p>
			<p class="list-group-subtitle text-truncate">Second Level Text</p>
		</div>
		<div class="autofit-col">
			<div class="dropdown dropdown-action">
				...
			</div>
		</div>
	</li>
</ul>

Notification

Account Example One

List Group Subtext
- Remove
- Download
- Checkout
Account Example Two

List Group Subtext
- Remove
- Download
- Checkout

Code Sample (expand to see it)

<ul class="list-group list-group-notification">
	<li class="list-group-item list-group-item-flex list-group-item-primary">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				...
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				<span class="inline-item">
					...
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<section class="autofit-section">
				<div class="list-group-title">
					<a href="#1">Account Example One</a>
				</div>
				<p class="list-group-subtext">List Group Subtext</p>
			</section>
		</div>
		<div class="autofit-col">
			<div class="dropdown dropdown-action">
				...
			</div>
		</div>
	</li>
	<li class="list-group-item list-group-item-flex">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox" />
					<span class="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				<span class="inline-item">
					...
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<section class="autofit-section">
				<div class="list-group-title">
					<a href="#1">Account Example Two</a>
				</div>
				<p class="list-group-subtext">List Group Subtext</p>
			</section>
		</div>
		<div class="autofit-col">
			<div class="dropdown dropdown-action">
				...
			</div>
		</div>
	</li>
</ul>

Group Elements

Use the .list-group-header and .list-group-header-title class.

List Group Header
ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual

List Group Subtext

Approved
- Remove
- Download
- Checkout

Code Sample (expand to see it)

<ul class="list-group">
	<li class="list-group-header">
		<h3 class="list-group-header-title">List Group Header</h3>
	</li>
	<li class="list-group-item list-group-item-flex">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox" />
					<span class="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				<span class="inline-item">
					...
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<section class="autofit-section">
				<div class="list-group-title">
					<span class="text-truncate-inline">
						<a class="text-truncate" href="#1"
							>ReallySuperInsanelyJustIncrediblyLongAndTotallyNotPossibleWordButWeAreReallyTryingToCoverAllOurBasesHereJustInCaseSomeoneIsNutsAsPerUsual</a
						>
					</span>
				</div>
				<p class="list-group-subtext">
					<span class="text-truncate-inline">
						<span class="text-truncate">List Group Subtext</span>
					</span>
				</p>
				<div class="list-group-detail">
					<span class="label label-success">
						<span class="label-item label-item-expand"
							>Approved</span
						>
					</span>
				</div>
			</section>
		</div>
		<div class="autofit-col">
			<div class="dropdown dropdown-action">
				...
			</div>
		</div>
	</li>
</ul>

Items

Colors

List Item Normal
List Item Success
List Item Info
List Item Warning
List Item Danger
List Item Light
List Item Dark

Code Sample (expand to see it)

<ul class="list-group">
	<li class="list-group-item">List Item Normal</li>
	<li class="list-group-item list-group-item-success">List Item Success</li>
	<li class="list-group-item list-group-item-info">List Item Info</li>
	<li class="list-group-item list-group-item-warning">List Item Warning</li>
	<li class="list-group-item list-group-item-danger">List Item Danger</li>
	<li class="list-group-item list-group-item-light">List Item Light</li>
	<li class="list-group-item list-group-item-dark">List Item Dark</li>
</ul>

Active Colors

List Item Action Normal Active List Item Action Success Active List Item Action Info Active List Item Action Warning Active List Item Action Danger Active List Item Action Light Active List Item Action Dark Active

Code Sample (expand to see it)

<div class="list-group">
	<a class="active list-group-item list-group-item-action" href="#1"
		>List Item Action Normal Active</a
	>
	<a
		class="active list-group-item list-group-item-action list-group-item-success"
		href="#1"
		>List Item Action Success Active</a
	>
	<a
		class="active list-group-item list-group-item-action list-group-item-info"
		href="#1"
		>List Item Action Info Active</a
	>
	<a
		class="active list-group-item list-group-item-action list-group-item-warning"
		href="#1"
		>List Item Action Warning Active</a
	>
	<a
		class="active list-group-item list-group-item-action list-group-item-danger"
		href="#1"
		>List Item Action Danger Active</a
	>
	<a
		class="active list-group-item list-group-item-action list-group-item-light"
		href="#1"
		>List Item Action Light Active</a
	>
	<a
		class="active list-group-item list-group-item-action list-group-item-dark"
		href="#1"
		>List Item Action Dark Active</a
	>
</div>

Items as Links and Buttons

List Item 1 List Item 2 List Item 4

Code Sample (expand to see it)

<div class="list-group">
	<a class="list-group-item list-group-item-action" href="#1">List Item 1</a>
	<a class="list-group-item list-group-item-action" href="#1">List Item 2</a>
	<button class="list-group-item list-group-item-action" type="button">
		List Item 3
	</button>
	<a class="list-group-item list-group-item-action" href="#1">List Item 4</a>
</div>

Actions on Hover

Anchors

Anchors
- Remove
- Download
- Checkout

Code Sample (expand to see it)

<ul class="list-group show-quick-actions-on-hover">
	<li class="list-group-item list-group-item-flex">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox" />
					<span class="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				<span class="inline-item">
					...
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<section class="autofit-section">
				<div class="list-group-title">
					<a href="#1">Anchors</a>
				</div>
			</section>
		</div>
		<div class="autofit-col">
			<div class="quick-action-menu">
				<a
					class="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
				<a
					class="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
				<a
					class="component-action quick-action-item"
					href="#1"
					role="button"
				>
					...
				</a>
			</div>
			<div class="dropdown dropdown-action">
				<a
					aria-expanded="false"
					aria-haspopup="true"
					class="component-action dropdown-toggle"
					data-toggle="dropdown"
					href="#1"
					id="dropdownAction1"
					role="button"
				>
					...
				</a>
				<ul
					aria-labelledby=""
					class="dropdown-menu dropdown-menu-right"
				>
					<li>
						<a class="dropdown-item" href="#1" role="button"
							>Remove</a
						>
					</li>
					<li>
						<a class="dropdown-item" href="#1" role="button"
							>Download</a
						>
					</li>
					<li>
						<a class="dropdown-item" href="#1" role="button"
							>Checkout</a
						>
					</li>
				</ul>
			</div>
		</div>
	</li>
</ul>

Buttons

Account Example One

List Group Subtext

Code Sample (expand to see it)

<ul class="list-group show-quick-actions-on-hover">
	<li class="list-group-item list-group-item-flex">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				<label>
					<input class="custom-control-input" type="checkbox" />
					<span class="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				<span class="inline-item">
					...
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<section class="autofit-section">
				<div class="list-group-title">
					<span class="text-truncate-inline">
						<a class="text-truncate" href="#1"
							>Account Example One</a
						>
					</span>
				</div>
				<p class="list-group-subtext">
					<span class="text-truncate-inline">
						<span class="text-truncate">List Group Subtext</span>
					</span>
				</p>
			</section>
		</div>
		<div class="autofit-col">
			<div class="quick-action-menu">
				<button
					class="component-action quick-action-item"
					type="button"
				>
					...
				</button>
				<button
					class="component-action quick-action-item"
					type="button"
				>
					...
				</button>
				<button
					class="component-action quick-action-item"
					type="button"
				>
					...
				</button>
			</div>
			<div class="dropdown dropdown-action">
				<button
					aria-expanded="false"
					aria-haspopup="true"
					class="component-action dropdown-toggle"
					data-toggle="dropdown"
					id="dropdownAction1"
					type="button"
				>
					...
				</button>
				<ul
					aria-labelledby=""
					class="dropdown-menu dropdown-menu-right"
				>
					<li>
						<button class="dropdown-item" type="button">
							Remove
						</button>
					</li>
					<li>
						<button class="dropdown-item" type="button">
							Download
						</button>
					</li>
					<li>
						<button class="dropdown-item" type="button">
							Checkout
						</button>
					</li>
				</ul>
			</div>
		</div>
	</li>
</ul>

Active

Use the .active class on the same element that you putted .list-group-item.

Account Example One

Second Level Text
- Remove
- Edit
- Move
- Checkout

Code Sample (expand to see it)

<ul class="list-group">
	<li class="list-group-item list-group-item-flex active">
		<div class="autofit-col">
			<div class="custom-control custom-checkbox">
				<label>
					<input
						checked
						class="custom-control-input"
						type="checkbox"
					/>
					<span class="custom-control-label"></span>
				</label>
			</div>
		</div>
		<div class="autofit-col">
			<div class="sticker sticker-secondary">
				<span class="inline-item">
					...
				</span>
			</div>
		</div>
		<div class="autofit-col autofit-col-expand">
			<p class="list-group-title text-truncate">
				<a href="#1">Account Example One</a>
			</p>
			<p class="list-group-subtitle text-truncate">Second Level Text</p>
		</div>
		<div class="autofit-col">
			<div class="dropdown dropdown-action">
				...
			</div>
		</div>
	</li>
</ul>

QuickActionMenu

ClayList children

API

ClayList

ClayList.Header

ClayList.Item

ClayList.ItemField

ClayList.ItemText

ClayList.ItemTitle

ClayList.QuickActionMenu

ClayList.QuickActionMenu.Item

ClayListWithItems

Example

List Section

Variations

Bordered

Default

Notification

Group Elements

Header

List Group Header

Items

Colors

Active Colors

Items as Links and Buttons

Actions on Hover

Anchors

Buttons

Active