> For the complete documentation index, see [llms.txt](https://2600hz.gitbook.io/sds/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://2600hz.gitbook.io/sds/sds-3.0/sds-components/components/list/code.md).

# Code

List component usage and API reference.

{% hint style="info" %}
This component require devs to use one variant or another from the very first moment based on the kind of list developers want to insert. <`List.Order>` or `<List.Unorder>`.
{% endhint %}

## API

This component extends the native anchor tag props. This means this component can receive the native html div tag attributes.

<table><thead><tr><th>Props</th><th width="353.66666666666663">Data Type</th><th>Required</th></tr></thead><tbody><tr><td><code>children</code></td><td>List.Item</td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>type</code></td><td>'1' | 'A' | 'a' | 'I' | 'i'</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

{% hint style="info" %}
The type prop will only work for ordered lists.
{% endhint %}

## List.Item

This subcomponent basically works as the `<li>` tag on normal lists, with the main different it will only accept text as children element. Besides that, if the developer is working with an un-order list, they can add the prop `symbol` and customize the bullet that's shown next to the text content.

<table><thead><tr><th>Props</th><th width="353.66666666666663">Data Type</th><th>Required</th></tr></thead><tbody><tr><td><code>children</code></td><td>string</td><td><span data-gb-custom-inline data-tag="emoji" data-code="2705">✅</span></td></tr><tr><td><code>className</code></td><td><code>string</code></td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr><tr><td><code>symbol</code></td><td>'disc' | 'circle | 'square' | 'string'</td><td><span data-gb-custom-inline data-tag="emoji" data-code="274c">❌</span></td></tr></tbody></table>

{% hint style="warning" %}
The symbol customization will only work on unordered lists.
{% endhint %}

## Example