ArkSteps Component

Thành phần điều khiển tiến trình nhiều bước (Stepper / Multi-Step Wizard) xây dựng dựa trên primitive WAI-ARIA chính thống @ark-ui/react/steps (Zag.js) và hệ thống token Tailwind CSS v4.

@ark-ui/react/stepsTailwind CSS v4WAI-ARIA Stepper

Interactive Playground

Live Demo

Khung thử nghiệm tương tác: Tùy biến kiểu hiển thị, kích thước, hướng sắp xếp và chế độ kiểm soát.

Bước 1: Thiết lập thông tin cá nhân

Điền đầy đủ tên, email xác thực và các thông tin liên hệ bảo mật cần thiết để tạo hồ sơ quản trị viên.

Bước hiện tại: 1 / 4

Ví dụ 1: Cú pháp Shorthand tinh gọn

Shorthand API

Khởi tạo nhanh toàn bộ Stepper chỉ với mảng thuộc tính items. Tự động đánh số và hiển thị Checkmark khi hoàn tất.

Cách dùng: Chỉ cần truyền items=["Tạo tài khoản","Xác thực hồ sơ","Thanh toán","Kích hoạt"] và thành phần sẽ tự xử lý toàn bộ danh sách, trigger, chỉ số bước và đường nối ngăn cách.

Ví dụ 2: Quy trình Thanh toán Đơn hàng (E-Commerce Checkout)

E-Commerce Wizard

Ứng dụng Stepper trong kịch bản bán hàng thực tế: Điền thông tin giao hàng, chọn phương thức thanh toán và xác nhận đơn.

1. Địa chỉ giao nhận hàng

Vận chuyển tiêu chuẩn (2-3 ngày)

Ví dụ 3: Quy trình Tuyến tính & Xác thực Dữ liệu (Linear Validation)

Linear Mode

Ở chế độ linear={true}, người dùng không thể nhấp nhảy cóc sang các bước kế tiếp khi chưa hoàn thành hợp lệ bước hiện tại.

Ví dụ 4: Quy trình dạng Dọc (Vertical Orientation)

Vertical Layout

Bố cục dọc lý tưởng cho hướng dẫn từng bước chi tiết, danh sách kiểm tra onboarding hoặc quy trình triển khai phần mềm.

DATABASE_URL, REDIS_URL, SESSION_SECRET

Đảm bảo kết nối Redis sẵn sàng cho background queue worker và socket server.

Ví dụ 5: Kiểu Chấm Tròn Tối Giản (Dots Variant)

Dots Minimal

Biến thể Dots thanh lịch, tiết kiệm diện tích tối đa, hoàn hảo cho carousels, slideshow, hoặc các dialog giới thiệu nhanh.

Mỗi chấm là một ArkSteps.Trigger chuẩn WAI-ARIA tab, hỗ trợ phím mũi tên và focus ring mượt mà.

Ví dụ 6: Điều khiển Ngoại vi (useSteps Hook & RootProvider)

useSteps() Hook

Khi cần quản lý trạng thái máy trạng thái từ hook bên ngoài hoặc tích hợp với Redux / Zustand / React Hook Form.

Giá trị từ Hook:Bước 2 (33.33333333333333%)

Bài viết đã được gửi cho tổng biên tập xét duyệt.

Bảng Tham Chiếu Thuộc Tính & Khả Năng Tiếp Cận

Thông số kỹ thuật chi tiết của các subcomponents và phím tắt WAI-ARIA.

Thuộc tính / SubcomponentKiểu dữ liệu (Type)Mặc địnhMô tả chức năng
variant'solid' | 'subtle' | 'outline' | 'dots''solid'Phong cách thiết kế của vòng tròn chỉ báo bước.
size'sm' | 'md' | 'lg''md'Kích thước toàn bộ indicator, font chữ và thanh nối.
orientation'horizontal' | 'vertical''horizontal'Bố cục chiều ngang hoặc chiều dọc.
linearbooleanfalseBuộc hoàn thành tuần tự từng bước, không được nhảy cóc.
showCheckmarkOnCompletebooleantrueTự động hiển thị dấu tick khi bước đã hoàn thành.
showProgressbooleanfalseTự động hiển thị thanh tiến trình động ở đầu stepper.
itemsArkStepItem[]undefinedMảng dữ liệu cho chế độ Shorthand tiện lợi.
Tab / Shift + Tab

Di chuyển focus qua lại giữa các trigger bước.

Enter / Space

Kích hoạt chọn bước đang focus (khi không linear).

WAI-ARIA Attributes

role="tablist", aria-current="step", data-complete.

© 2026. FlatVn All rights reserved. Version 4.3.40