---
title: "Trạng thái phần tử"
description: "Tùy chỉnh giao diện phần tử theo từng trạng thái và dùng điều kiện để vô hiệu hóa phần tử khi chạy ứng dụng."
---

Các phần tử flow tương tác thay đổi giao diện dựa trên hành động của người dùng: một tùy chọn quiz được nhấn sẽ chuyển sang trạng thái **Selected** (Đã chọn), một ô nhập liệu được focus sẽ chuyển sang trạng thái **Active** (Đang hoạt động). Một số trạng thái được điều khiển theo điều kiện — ví dụ, bạn có thể **disable** (vô hiệu hóa) một nút. Hãy tùy chỉnh style riêng cho từng trạng thái để cung cấp phản hồi trực quan cho người dùng mà không cần viết code ứng dụng.
<div style={{
  maxWidth: '560px',
  margin: '0 auto 2rem',
  position: 'relative',
  aspectRatio: '16/9',
  width: '100%'
}}>
  <iframe
    style={{
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%'
    }}
    src="https://www.youtube.com/embed/gdsNfHpKAqQ?si=VY5mqZgH1j0RB6fE"
    title="YouTube video player"
    frameBorder="0"
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
    referrerPolicy="strict-origin-when-cross-origin"
    allowFullScreen
  />
</div>
## Các trạng thái có sẵn theo loại phần tử \{#available-states-by-element-kind\}

| Loại phần tử | Trạng thái tích hợp sẵn | Trạng thái có thể thêm |
|---|---|---|
| [Phần tử có thể chọn](#selectable-element-states) | **Default**, **Selected** | **Disabled** |
| [Ô nhập liệu](#input-states) | **Default**, **Active**, **Invalid** | **Disabled** |
| [Bất kỳ phần tử nào có tương tác chạm](#condition-driven-disabled-state) — nút, hình ảnh, icon, container, v.v. | **Default** | **Disabled** |
| [Các bước chỉ báo tiến trình](#step-states-for-progress-indicators) | **Completed**, **Current**, **Upcoming** | — |
Các trạng thái **Addable** không hiển thị mặc định — mở **States settings** Settings để thêm chúng. Chúng được [**điều khiển bởi điều kiện**](#condition-driven-disabled-state): bạn tự định nghĩa khi nào chúng được kích hoạt.
## Cách tạo kiểu cho một trạng thái \{#how-to-style-a-state\}

1. Chọn một phần tử. Phần **States** trong panel bên phải liệt kê các trạng thái mà phần tử đó hỗ trợ.
2. Trong phần **States**, kích hoạt trạng thái mục tiêu. Thêm [trạng thái Disabled theo điều kiện](#condition-driven-disabled-state) nếu cần.
3. Thay đổi bất kỳ thuộc tính nào — fill, border, typography, v.v. Thay đổi đó chỉ áp dụng cho trạng thái đó.
Nested elements trở thành stateful cùng với parent. Mọi thay đổi trên child đều được áp dụng trong phạm vi trạng thái active của parent.

4. Builder áp dụng style phù hợp tại runtime.
## Trạng thái của phần tử có thể chọn \{#selectable-element-states\}

Các phần tử có thể chọn — tùy chọn quiz, sản phẩm, tab, nút bật/tắt dùng thử, và bất kỳ [phần tử có thể chọn tùy chỉnh](flow-selectable-elements#make-an-element-selectable) nào — đều có sẵn hai trạng thái:

- **Default**: Giao diện mặc định của phần tử.
- **Selected**: Áp dụng khi người dùng nhấn vào phần tử. Builder sẽ quay lại Default khi người dùng bỏ chọn phần tử đó.
Trong nhóm chọn một, khi chọn một phần tử thì các phần tử còn lại sẽ bị bỏ chọn. Nhóm chọn nhiều cho phép chọn đồng thời nhiều phần tử. Toggle hoạt động độc lập — chọn một toggle không ảnh hưởng đến các toggle khác cùng cấp. Xem [các loại nhóm](flow-selectable-elements#group-types).

:::tip
Cần áp dụng cùng một style cho trạng thái của nhiều phần tử (ví dụ: các lựa chọn quiz)? Hãy style một phần tử trước, rồi nhân bản nó. Style theo trạng thái không được kế thừa giữa các phần tử cùng cấp — nhân bản là cách xử lý hiện tại.
:::
## Trạng thái của input \{#input-states\}

- **Default**: Giao diện mặc định của input.
- **Active**: Áp dụng khi input đang được focus.
- **Invalid**: Áp dụng khi nội dung của input không vượt qua validation. Ví dụ: khi trường email không có `@`. Xem [Validation input](builder-inputs-and-forms#input-validation).
- **Disabled**: Input không thể tương tác. Thêm trạng thái này thủ công; xem [Trạng thái Disabled theo điều kiện](#condition-driven-disabled-state).

Tùy chỉnh từng trạng thái theo cách tương tự như element selectable: kích hoạt trạng thái cần chỉnh, rồi thay đổi thuộc tính.

## Trạng thái Disabled theo điều kiện \{#condition-driven-disabled-state\}

Trạng thái Disabled ngăn người dùng tương tác với một phần tử. Khác với các trạng thái Default, Selected, Active hay Invalid, trạng thái Disabled không tự kích hoạt — nó cần một điều kiện do người dùng định nghĩa.

Disabled có thể áp dụng trên:
- **Inputs**: Bất kỳ [trường nhập liệu](builder-inputs-and-forms) nào — văn bản, email, mật khẩu, số, điện thoại, ngày và/hoặc giờ.
- **Các phần tử có thể chọn**: Tùy chọn quiz, sản phẩm, tab, toggle dùng thử, và bất kỳ [phần tử có thể chọn tùy chỉnh](flow-selectable-elements#make-an-element-selectable) nào.
- **Bất kỳ phần tử nào có tương tác nhấn**: Ví dụ: nút, hình ảnh hoặc biểu tượng kích hoạt hành động điều hướng.
### Thêm trạng thái Disabled \{#add-the-disabled-state\}

Để thêm và cấu hình trạng thái Disabled:
1. Chọn phần tử mục tiêu.
2. Trong phần **States**, nhấp vào **Settings** Settings.
3. Chọn **Add Disabled state**. Trạng thái Disabled sẽ xuất hiện trong phần **States**.
4. Bên cạnh trạng thái Disabled mới, nhấp vào **Edit conditional state** Edit conditional state.
5. Thêm một điều kiện. Nếu bạn muốn vô hiệu hóa nút **submit** khi dữ liệu nhập chưa vượt qua xác thực, hãy so sánh biến `isValid` của input với `false`.
6. Tùy chỉnh giao diện cho trạng thái Disabled để thể hiện rõ sự hạn chế (ví dụ: giảm độ mờ đục).
{ }

SDK đánh giá điều kiện tại thời điểm chạy và tự động áp dụng trạng thái Disabled khi phù hợp — không cần thay đổi code trong ứng dụng.
## Trạng thái bước của progress indicator \{#step-states-for-progress-indicators\}

:::link
Bài viết chính: [Progress indicator](builder-loaders-and-progress-bars#step-states)
:::

Progress indicator cho người dùng biết họ đang ở đâu trong flow onboarding. Mỗi bước có ba trạng thái:

- **Completed**: Các bước người dùng đã hoàn thành.
- **Current**: Bước hiện tại của người dùng.
- **Upcoming**: Các bước người dùng chưa đến.