List

A component for displaying ordered or unordered lists with customizable markers and indicators.

Anatomy

<script>
  import { List, ListItem, ListIndicator } from "@saas-ui/svelte/components/list";
</script>

<List.Root>
  <ListItem>
    <ListIndicator />
    First item
  </ListItem>
  <ListItem>
    <ListIndicator />
    Second item
  </ListItem>
</List.Root>

Examples

Basic Accessibility

Basic unordered List with default marker style.

<List.Root>
	<List.Item>Lorem ipsum dolor sit amet, consectetur adipisicing elit</List.Item>
	<List.Item>Assumenda, quia temporibus eveniet a libero incidunt suscipit</List.Item>
	<List.Item>Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</List.Item>
</List.Root>

Nested Accessibility

Nested List structure with multiple levels of indentation.

<List.Root>
	<List.Item>First order item</List.Item>
	<List.Item>First order item</List.Item>
	<List.Item>
		First order item with list
		<List.Root class="pl-5">
			<List.Item>Nested item</List.Item>
			<List.Item>Nested item</List.Item>
			<List.Item>Nested item</List.Item>
		</List.Root>
	</List.Item>
	<List.Item>First order item</List.Item>
</List.Root>

Ordered Accessibility

Ordered list with numbered markers using the as="ol" prop.

<List.Root as="ol">
	<List.Item>Lorem ipsum dolor sit amet, consectetur adipisicing elit</List.Item>
	<List.Item>Assumenda, quia temporibus eveniet a libero incidunt suscipit</List.Item>
	<List.Item>Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</List.Item>
</List.Root>

With Icon Accessibility

List with custom icons as indicators using the ListIndicator component.

<List.Root variant="plain" align="start">
	<List.Item>
		<List.Indicator colour="green">
			<Icon as={CheckCircle} class="h-full w-full" />
		</List.Indicator>
		<Text as="span"
			>Lorem ipsum dolor sit amet, consectetur adipisicing elit. This
			is a longer text that wraps to multiple lines to demonstrate
			alignment.</Text>
	</List.Item>
	<List.Item>
		<List.Indicator colour="green">
			<Icon as={CheckCircle} class="h-full w-full" />
		</List.Indicator>
		<Text as="span"
			>Assumenda, quia temporibus eveniet a libero incidunt suscipit.
			Another multi-line example to show how icons align.</Text>
	</List.Item>
	<List.Item>
		<List.Indicator colour="green">
			<Icon as={CircleDashed} class="h-full w-full" />
		</List.Indicator>
		<Text as="span"
			>Quidem, ipsam illum quis sed voluptatum quae eum fugit earum</Text>
	</List.Item>
</List.Root>

Props

Prop	Type	Default	Description
`variant`	`marker \| plain`	`marker`	The visual style of the list.
`align`	`start \| center \| end`	`start`	The alignment of list item content with indicators.
`as`	`ul \| ol`	`ul`	The HTML element to render.
`class`	`text`	-	Additional CSS classes to apply.