Filter tab với single selection và hiệu ứng sliding background — mỗi lần đổi tab, background trượt mượt sang vị trí mới tạo cảm giác liên tục thay vì bật/tắt đột ngột.
Khi nào dùng
- Danh sách có 2–6 nhóm rõ ràng, người dùng thường chỉ quan tâm một nhóm tại một thời điểm
- Cần visual feedback mạnh khi chuyển filter để người dùng nhận ra trạng thái đã thay đổi
- Thay thế cho dropdown filter khi số lượng option ít và cần luôn hiển thị
Hành vi
| Trạng thái | Mô tả |
|---|---|
| Default | Tab “Tất cả” được chọn, hiện toàn bộ danh sách |
| Chọn tab | Background trượt sang tab đó, lọc chỉ còn nhóm tương ứng |
| Chọn lại “Tất cả” | Background trượt về đầu, hiện lại toàn bộ |
Tài khoản thanh toán
12,345,678đ
Chuyển tiền đến Nguyễn Văn A
MB Bank · 0987xxx321
-2,000,000đ
Hôm nay
Thanh toán điện EVN
Hóa đơn tháng 3/2026
-450,000đ
Hôm nay
Hoàn tiền Shopee
Đơn #SH9876543
+120,000đ
Hôm qua
Phí chuyển khoản
Liên ngân hàng
-11,000đ
Hôm qua
Nhận tiền từ Trần Thị B
Vietcombank
+5,000,000đ
22/03
Grab Food
Đặt đồ ăn
-135,000đ
22/03
Phí duy trì tài khoản
Tự động trừ
-55,000đ
21/03
Hoàn tiền hủy vé bay
VietJet Air
+2,340,000đ
20/03
Chuyển tiền học phí
BIDV · 9988xxx001
-8,500,000đ
19/03
Shopee Pay
Đơn hàng #78234
-320,000đ
19/03
Chọn tab để lọc theo nhóm giao dịch
Lưu ý thiết kế
Sliding transition — Dùng cubic-bezier(0.4, 0, 0.2, 1) cho cảm giác tự nhiên. Tránh linear vì trông cứng, tránh bounce vì quá playful cho context tài chính.
Không dùng cho multi-select — Pattern này là single selection. Nếu cần chọn nhiều filter cùng lúc, dùng checkbox hoặc toggle chip thay thế.
Tab “Tất cả” luôn đặt đầu tiên — Đây là trạng thái mặc định và điểm thoát tự nhiên khi người dùng muốn bỏ filter.