- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- Assumenda, quia temporibus eveniet a libero incidunt suscipit
- Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
Usage
import { List } from "chakra-ui-solid";<List.Root>
<List.Item>Item 1</List.Item>
<List.Item>Item 2</List.Item>
</List.Root>Examples
Ordered
Pass the as="ol" prop to create an ordered list
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- Assumenda, quia temporibus eveniet a libero incidunt suscipit
- Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
Icon
Use the List.Indicator component to add an icon to the list
- Lorem ipsum dolor sit amet, consectetur adipisicing elit
- Assumenda, quia temporibus eveniet a libero incidunt suscipit
- Quidem, ipsam illum quis sed voluptatum quae eum fugit earum
Nested
Here’s an example of a nested list
- First order item
- First order item
- First order item with list
- Nested item
- Nested item
- Nested item
- First order item
Marker Style
Use the _marker prop to style the marker of the list
- Your failure to comply with any provision of these Terms of Service;
- Your use of the Services, including but not limited to economic, physical, emotional, psychological or privacy related considerations; and
- Your actions to knowingly affect the Services via any bloatware, malware, computer virus, worm, Trojan horse, spyware, adware, crimeware, scareware, rootkit or any other program installed in a way that executable code of any program is scheduled to utilize or utilizes processor cycles during periods of time when such program is not directly or indirectly being used.
Props
| Prop | Default | Type |
|---|---|---|
align | — | ConditionalValue<'center' | 'start' | 'end' | PresetVariant<'list', 'align'>>How an item's own children line up across its cross axis. Only visible on `plain`. |
variant | 'marker' | ConditionalValue<'marker' | 'plain' | PresetVariant<'list', 'variant'>>Whether the browser draws its own bullets or numbers — `marker` restores them and tints them `fg.subtle`, `plain` leaves the item an `inline-flex` row for a {@link ListIndicator} to sit in. |
Plus HTMLChakraProps<"ul"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.