---
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/vi/components/steps
---

# Steps Component

Các thành phần bước trực quan hóa các quy trình, hướng dẫn hoặc quy trình công việc gồm nhiều bước bằng cách hiển thị các giai đoạn tuần tự. Được xây dựng bằng HTML ngữ nghĩa và bố cục linh hoạt, các bước hiển thị tiến trình thông qua trình hướng dẫn thiết lập, hướng dẫn và quy trình phức tạp. Hệ thống các bước Frutjam hỗ trợ nhiều kích thước, màu sắc, cấu trúc và trạng thái hoàn thành—lý tưởng cho trình hướng dẫn biểu mẫu, hướng dẫn cài đặt và theo dõi tiến trình.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học          | Kiểu            | Sự miêu tả                                      |
| ---------------- | --------------- | ----------------------------------------------- |
| steps            | Căn cứ          | Vùng chứa danh sách các bước được sắp xếp       |
| step             | Công cụ sửa đổi | Mục bước riêng lẻ có điểm đánh dấu được đánh số |
| steps-horizontal | Công cụ sửa đổi | Bố cục ngang (mặc định)                         |
| steps-vertical   | Công cụ sửa đổi | Bố cục xếp chồng theo chiều dọc                 |
| step-primary     | Màu sắc         | Điểm đánh dấu màu chủ đề chính                  |
| step-secondary   | Màu sắc         | Điểm đánh dấu màu chủ đề phụ                    |
| step-accent      | Màu sắc         | Điểm đánh dấu màu chủ đề nhấn                   |
| step-neutral     | Màu sắc         | Điểm đánh dấu màu chủ đề trung tính             |
| step-info        | Màu sắc         | Điểm đánh dấu màu ngữ nghĩa thông tin           |
| step-success     | Màu sắc         | Đánh dấu màu ngữ nghĩa thành công               |
| step-warning     | Màu sắc         | Cảnh báo đánh dấu màu ngữ nghĩa                 |
| step-error       | Màu sắc         | Lỗi đánh dấu màu ngữ nghĩa                      |

## Cách sử dụng cơ bản

## Bố cục các bước

```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>
```

## Màu sắc bước

```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>
```

## Bước dọc

```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>
```

## Các bước với mô tả

```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>
```

## Các bước đáp ứng

```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>
```