> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# Timeline

A vertical run of events in the order they happened — a timeline records what occurred, so reach for `Progress` when the question is how far along something is rather than what has already taken place. `TimelineConnector` and `TimelineContent` are each optional, and the last item looks after itself: its line and its bottom padding go without any special casing.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/Timeline) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/data-display-timeline--overview)

```tsx
import { Timeline, TimelineConnector, TimelineIndicator, TimelineItem, TimelineSeparator } from '@wallarm-org/design-system/Timeline';

export const Basic = () => (
  <Timeline data-testid='timeline'>
    <TimelineItem>
      <TimelineConnector>
        <TimelineIndicator>1</TimelineIndicator>
        <TimelineSeparator />
      </TimelineConnector>
    </TimelineItem>
    <TimelineItem>
      <TimelineConnector>
        <TimelineIndicator>2</TimelineIndicator>
        <TimelineSeparator />
      </TimelineConnector>
    </TimelineItem>
    <TimelineItem>
      <TimelineConnector>
        <TimelineIndicator>3</TimelineIndicator>
        <TimelineSeparator />
      </TimelineConnector>
    </TimelineItem>
    <TimelineItem>
      <TimelineConnector>
        <TimelineIndicator>4</TimelineIndicator>
        <TimelineSeparator />
      </TimelineConnector>
    </TimelineItem>
    <TimelineItem>
      <TimelineConnector>
        <TimelineIndicator>5</TimelineIndicator>
        <TimelineSeparator />
      </TimelineConnector>
    </TimelineItem>
  </Timeline>
);
```

## Usage

```tsx
import { Timeline, TimelineConnector, TimelineIndicator, TimelineItem, TimelineSeparator } from '@wallarm-org/design-system/Timeline';
```

## Examples

### With content

Content beside the rail. The line stretches to whatever height the row turns out to need,
which is why the third step's long description does not break the rhythm.

```tsx
import { Timeline, TimelineConnector, TimelineContent, TimelineDescription, TimelineIndicator, TimelineItem, TimelineSeparator, TimelineTitle } from '@wallarm-org/design-system/Timeline';

export const WithContent = () => (
  <div className='max-w-[360px]'>
    <Timeline>
      <TimelineItem>
        <TimelineConnector>
          <TimelineIndicator>1</TimelineIndicator>
          <TimelineSeparator />
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle>Order placed</TimelineTitle>
          <TimelineDescription>The order was placed by the customer.</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineConnector>
          <TimelineIndicator>2</TimelineIndicator>
          <TimelineSeparator />
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle>Order confirmed</TimelineTitle>
          <TimelineDescription>Payment received, order confirmed.</TimelineDescription>
        </TimelineContent>
      </TimelineItem>
      <TimelineItem>
        <TimelineConnector>
          <TimelineIndicator>3</TimelineIndicator>
          <TimelineSeparator />
        </TimelineConnector>
        <TimelineContent>
          <TimelineTitle>Order shipped</TimelineTitle>
          <TimelineDescription>
            The package left the warehouse and is on its way. This step has the longest description
            of the three, to show the connecting line stretching to match a taller row.
          </TimelineDescription>
        </TimelineContent>
      </TimelineItem>
    </Timeline>
  </div>
);
```

### Without connector

Content with no rail at all — effectively a `List` of titles and descriptions, for when the
order carries the sequence and a drawn line would only add furniture.

```tsx
import { Timeline, TimelineContent, TimelineDescription, TimelineItem, TimelineTitle } from '@wallarm-org/design-system/Timeline';

export const WithoutConnector = () => (
  <Timeline>
    <TimelineItem>
      <TimelineContent>
        <TimelineTitle>Order placed</TimelineTitle>
        <TimelineDescription>The order was placed by the customer.</TimelineDescription>
      </TimelineContent>
    </TimelineItem>
    <TimelineItem>
      <TimelineContent>
        <TimelineTitle>Order confirmed</TimelineTitle>
        <TimelineDescription>Payment received, order confirmed.</TimelineDescription>
      </TimelineContent>
    </TimelineItem>
    <TimelineItem>
      <TimelineContent>
        <TimelineTitle>Order shipped</TimelineTitle>
        <TimelineDescription>
          The package left the warehouse and is on its way. This step has the longest description of
          the three, to show the connecting line stretching to match a taller row.
        </TimelineDescription>
      </TimelineContent>
    </TimelineItem>
  </Timeline>
);
```

## Props

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| data-testid    | `string \| undefined`                                |         |             |

### TimelineConnector

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |

### TimelineContent

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |

### TimelineDescription

| Prop           | Type                                                                              | Default | Description |
| -------------- | --------------------------------------------------------------------------------- | ------- | ----------- |
| title          | `string \| undefined`                                                             |         |             |
| defaultChecked | `boolean \| undefined`                                                            |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined`                              |         |             |
| autoFocus      | `boolean \| undefined`                                                            |         |             |
| id             | `string \| undefined`                                                             |         |             |
| tabIndex       | `number \| undefined`                                                             |         |             |
| rel            | `string \| undefined`                                                             |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`                                     |         |             |
| asChild        | `boolean \| undefined`                                                            |         |             |
| data-testid    | `string \| undefined`                                                             |         |             |
| align          | `{ left: string; center: string; right: string; }`                                |         |             |
| inline         | `{ true: string; }`                                                               |         |             |
| grow           | `{ true: string; }`                                                               |         |             |
| truncate       | `{ true: string; false: string; }`                                                |         |             |
| decoration     | `{ dashed: string; }`                                                             |         |             |
| lineHeight     | `{ none: string; tight: string; snug: string; normal: string; relaxed: string; }` |         |             |
| textTransform  | `{ uppercase: string; lowercase: string; capitalize: string; none: string; }`     |         |             |
| lineClamp      | `number \| undefined`                                                             |         |             |

### TimelineIndicator

| Prop           | Type                                                                                                        | Default | Description                                                                |
| -------------- | ----------------------------------------------------------------------------------------------------------- | ------- | -------------------------------------------------------------------------- |
| title          | `string \| undefined`                                                                                       |         |                                                                            |
| defaultChecked | `boolean \| undefined`                                                                                      |         |                                                                            |
| defaultValue   | `string \| number \| readonly string[] \| undefined`                                                        |         |                                                                            |
| autoFocus      | `boolean \| undefined`                                                                                      |         |                                                                            |
| id             | `string \| undefined`                                                                                       |         |                                                                            |
| tabIndex       | `number \| undefined`                                                                                       |         |                                                                            |
| rel            | `string \| undefined`                                                                                       |         |                                                                            |
| color          | `{ neutral: string; 'neutral-alt': string; brand: string; danger: string; success: string; info: string; }` |         |                                                                            |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`                                                               |         |                                                                            |
| asChild        | `boolean \| undefined`                                                                                      |         | Applies the badge to its child element, such as a span or a native button. |
| data-testid    | `string \| undefined`                                                                                       |         |                                                                            |

### TimelineItem

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| title          | `string \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |

### TimelineSeparator

| Prop           | Type                                                 | Default | Description |
| -------------- | ---------------------------------------------------- | ------- | ----------- |
| title          | `string \| undefined`                                |         |             |
| defaultChecked | `boolean \| undefined`                               |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |             |
| autoFocus      | `boolean \| undefined`                               |         |             |
| id             | `string \| undefined`                                |         |             |
| tabIndex       | `number \| undefined`                                |         |             |
| rel            | `string \| undefined`                                |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |             |
| data-testid    | `string \| undefined`                                |         |             |
| spacing        | `complex`                                            |         |             |
| decorative     | `boolean \| undefined`                               |         |             |

### TimelineTitle

| Prop           | Type                                                                              | Default | Description |
| -------------- | --------------------------------------------------------------------------------- | ------- | ----------- |
| title          | `string \| undefined`                                                             |         |             |
| defaultChecked | `boolean \| undefined`                                                            |         |             |
| defaultValue   | `string \| number \| readonly string[] \| undefined`                              |         |             |
| autoFocus      | `boolean \| undefined`                                                            |         |             |
| id             | `string \| undefined`                                                             |         |             |
| tabIndex       | `number \| undefined`                                                             |         |             |
| rel            | `string \| undefined`                                                             |         |             |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`                                     |         |             |
| asChild        | `boolean \| undefined`                                                            |         |             |
| data-testid    | `string \| undefined`                                                             |         |             |
| align          | `{ left: string; center: string; right: string; }`                                |         |             |
| inline         | `{ true: string; }`                                                               |         |             |
| grow           | `{ true: string; }`                                                               |         |             |
| truncate       | `{ true: string; false: string; }`                                                |         |             |
| decoration     | `{ dashed: string; }`                                                             |         |             |
| lineHeight     | `{ none: string; tight: string; snug: string; normal: string; relaxed: string; }` |         |             |
| textTransform  | `{ uppercase: string; lowercase: string; capitalize: string; none: string; }`     |         |             |
| lineClamp      | `number \| undefined`                                                             |         |             |

## Explorer