---
title: "Steps"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Steps for wizard flows, checkout funnels, and onboarding. Horizontal and vertical layouts with numbered icons and completed step states."
url: https://frutjam.com/id/components/steps
---

# Steps Component

Komponen langkah memvisualisasikan proses multi-langkah, panduan, atau alur kerja dengan menampilkan tahapan berurutan. Dibangun dengan HTML semantik dan tata letak yang fleksibel, langkah-langkah menunjukkan kemajuan melalui panduan pengaturan, tutorial, dan prosedur yang rumit. Sistem langkah Frutjam mendukung berbagai ukuran, warna, struktur, dan status penyelesaian—ideal untuk penyihir formulir, panduan instalasi, dan pelacakan kemajuan.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas            | Jenis    | Keterangan                                      |
| ---------------- | -------- | ----------------------------------------------- |
| steps            | Basis    | Wadah untuk daftar langkah yang diurutkan       |
| step             | Pengubah | Item langkah individual dengan penanda bernomor |
| steps-horizontal | Pengubah | Tata letak horizontal (default)                 |
| steps-vertical   | Pengubah | Tata letak bertumpuk vertikal                   |
| step-primary     | Warna    | Penanda warna tema utama                        |
| step-secondary   | Warna    | Penanda warna tema sekunder                     |
| step-accent      | Warna    | Penanda warna tema aksen                        |
| step-neutral     | Warna    | Penanda warna tema netral                       |
| step-info        | Warna    | Info penanda warna semantik                     |
| step-success     | Warna    | Penanda warna semantik sukses                   |
| step-warning     | Warna    | Peringatan penanda warna semantik               |
| step-error       | Warna    | Kesalahan penanda warna semantik                |

## Penggunaan Dasar

## Tata Letak Langkah

```html
<ul class="steps steps-horizontal">
  <li class="step">Step 1</li>
  <li class="step step-primary">Step 2</li>
  <li class="step">Step 3</li>
</ul>
```

## Warna Langkah

```html
<ul class="steps">
  <li class="step step-primary">Primary</li>
  <li class="step step-secondary">Secondary</li>
  <li class="step step-accent">Accent</li>
  <li class="step step-info">Info</li>
  <li class="step step-success">Success</li>
  <li class="step step-warning">Warning</li>
  <li class="step step-error">Error</li>
</ul>
```

## Langkah Vertikal

```html
<ul class="steps steps-vertical">
  <li class="step step-primary">Account setup</li>
  <li class="step step-primary">Personal info</li>
  <li class="step">Payment method</li>
  <li class="step">Confirmation</li>
</ul>
```

## Langkah-langkah dengan Deskripsi

```html
<div class="space-y-4">
  <div>
    <ul class="steps w-full">
      <li class="step step-primary">Register</li>
      <li class="step step-primary">Verify Email</li>
      <li class="step">Choose Plan</li>
      <li class="step">Complete</li>
    </ul>
    <div class="grid grid-cols-4 gap-4 mt-4 text-xs text-center">
      <div>Create account</div>
      <div>Check your inbox</div>
      <div>Select pricing</div>
      <div>Get started</div>
    </div>
  </div>
</div>
```

## Langkah Responsif

```html
<ul class="steps w-full">
  <li class="step step-primary">Order placed</li>
  <li class="step step-primary">Processing</li>
  <li class="step">Shipped</li>
  <li class="step">Delivered</li>
</ul>
```