Timeline

Vertical or horizontal sequence of events with a connecting line, markers, and per-item content. Bind an items array for the built-in row layout, or take over any region with a render-prop / declarative <BsTimelineItem> child. Selection is opt-in and two-way bound; clicks emit a typed item-click detail.

Playground

Toggle each input with a <BsSelect> or <BsCheckbox> and watch the single live timeline — and the copyable snippet beneath it — update to match.

ReverseCustom markersCard content
Keyboard shortcuts
  • The timeline is only keyboard-interactive while Selectable is single or multiple. With none it renders as a plain list — the items carry no tabindex and take no focus.
  • Tab — enter the timeline; exactly one item holds the tab stop (roving tabindex)
  • / — next item · / — previous item. Both axes do the same thing whatever the orientation; movement wraps around the ends and skips disabled items.
  • Home / End — first / last enabled item
  • Enter — select the focused item, replacing the current selection
  • Space — with multiple, adds or removes the focused item; with single it behaves like Enter
  • Shift + Enter / Shift + Space — with multiple, adds every enabled item between the anchor and the focused item
  • Ctrl/ + click — toggle one item · Shift + click — range-select from the anchor

Declarative authoring

Instead of binding items, render <BsTimelineItem> children and project into the named slots. Handy when each item's markup is bespoke rather than uniform.

Kickoff
Project scoping and team assembly.
2026-01-10
Design approved
PRD signed off after design review.
2026-02-02
Beta
Closed beta with 50 testers.
2026-04-15
Shipped v1
First public release.
2026-05-01