---
title: "Inputs và forms trong Flow Builder"
description: "Thêm các phần tử form tương tác như trường văn bản và checkbox."
---

Dùng inputs để thu thập dữ liệu người dùng nhập vào — chẳng hạn như tên, địa chỉ email, hoặc ngày sinh. Lưu câu trả lời và tham chiếu chúng ở các nơi khác trong flow, ví dụ như gọi tên người dùng ở màn hình sau.

## Thêm input \{#add-an-input\}

1. Nhấn **+** ở góc trên bên trái.
2. Chọn **Input**.
3. Chọn loại input:
   - **Text:** Nhập văn bản ngắn bất kỳ.
   - **Email:** Địa chỉ email, có thể bật kiểm tra định dạng.
   - **Password:** Nhập văn bản bảo mật, với các yêu cầu có thể cấu hình.
   - **Number:** Giá trị số, với định dạng có thể cấu hình.
   - **Phone number:** Số điện thoại.
   - **Date:** Mở bộ chọn ngày.
   - **Time:** Mở bộ chọn giờ.
   - **Date and time:** Mở bộ chọn kết hợp.

## Cấu hình input \{#configure-an-input\}

:::link
Để biết thêm chi tiết về cài đặt hiển thị — bố cục, kiểu dáng và khả năng hiển thị — xem [Kiểu dáng và giao diện](builder-styling).
:::

Với tất cả các loại input, bạn có thể cấu hình các mục sau trong tab **Design**:
- **Type:** Thay đổi loại input (Text, Email, Password, Number, Phone number, Date, Time, hoặc Date and time).
- **Element ID:** Định danh dùng để tham chiếu giá trị của input ở nơi khác trong flow. Xem [Sử dụng giá trị input](#use-input-values) bên dưới.
- **Placeholder:** Văn bản gợi ý hiển thị bên trong trường khi trống.
- **State:** Xác định giao diện của input trong các tình huống khác nhau. Chuyển đổi giữa **Default**, **Active**, **Invalid** và **Disabled** rồi áp dụng các kiểu hiển thị khác nhau cho từng trạng thái.
- **Typography:** Định dạng chữ cho giá trị hiển thị trong trường.
- **Leading and trailing icons:** Thêm icon bên trong trường input.

Một số cài đặt chỉ áp dụng cho một số loại input nhất định:
| Cài đặt                         | Loại input                        |
|---------------------------------|-----------------------------------|
| Nút xóa                         | Text, Email                       |
| Xác thực định dạng email        | Email                             |
| Hiển thị biểu tượng mật khẩu   | Password                          |
| Chỉnh sửa yêu cầu mật khẩu     | Password                          |
| Định dạng số                    | Number                            |
| Định dạng ngày/giờ              | Date, Time, Date and time         |
| Ngày tối thiểu và tối đa        | Date, Date and time               |

## Sử dụng giá trị đầu vào \{#use-input-values\}

Mỗi trường nhập liệu đều tự động trở thành một biến — bạn không cần thiết lập hay thêm action **On Submit** nào cả. Giá trị được tham chiếu thông qua **Element ID** của trường đó, do bạn đặt trong **Input Settings**.

Để sử dụng giá trị đầu vào ở nơi khác trong flow (ví dụ: cá nhân hóa nội dung, điền vào trường khác, hoặc điều hướng có điều kiện), hãy chèn một biến và chọn:

**Element > Screen > `<elementId>.value`**
:::link
Xem các hướng dẫn liên quan để hiểu cách sử dụng các giá trị đầu vào đã lưu:
- [Điều hướng có điều kiện](onboarding-navigation-branching)
- [Biến](onboarding-variables)
:::
## Xác thực đầu vào \{#input-validation\}

Hành vi xác thực phụ thuộc vào loại đầu vào. Mỗi đầu vào đều có một biến Boolean chỉ đọc là `<elementId>.isValid`, phản ánh liệu giá trị đã nhập có vượt qua các quy tắc xác thực của đầu vào đó không. Dùng nó trong các hành động có điều kiện hoặc hiển thị có điều kiện — ví dụ, để ẩn nút Tiếp theo cho đến khi định dạng email hợp lệ.

:::note
- Biến `isValid` là chỉ đọc — bạn không thể tự đặt giá trị cho nó.
- Đầu vào trống luôn được coi là hợp lệ.
- Đầu vào văn bản không có quy tắc xác thực. `textInput.isValid` luôn trả về `True`.
:::
| Loại đầu vào | Hành vi kiểm tra |
|---|---|
| Text | Không có quy tắc kiểm tra tích hợp. |
| Email | Tùy chọn. Bật **Validate email format** trong bảng **Design** để kiểm tra giá trị đã nhập theo định dạng email. |
| Phone number | Kiểm tra định dạng số điện thoại tích hợp. Không thể cấu hình trong Builder — quy tắc được đánh giá tại thời điểm chạy. |
| Password | Có thể cấu hình. Xem [Yêu cầu mật khẩu](#password-requirements) bên dưới. |
| Number | Dựa trên định dạng. Giá trị đã nhập phải khớp với định dạng số đã chọn. Xem [Định dạng số](#number-format) bên dưới. |
| Date, Time, Date and time | Tích hợp sẵn. Bộ chọn chỉ chấp nhận các giá trị ngày hoặc giờ hợp lệ. |
**Trạng thái hiển thị** [Invalid](builder-styling#input-states) được kích hoạt khi người dùng gửi form — ví dụ, bằng cách nhấn Enter hoặc Done trên bàn phím. Cho đến lúc đó, ô nhập liệu sẽ hiển thị trạng thái **Active** hoặc **Default**.
### Yêu cầu về mật khẩu \{#password-requirements\}

Trường nhập mật khẩu hỗ trợ các quy tắc kiểm tra có thể tùy chỉnh. Nhấn **Edit password requirements** trong bảng **Design** để mở trình chỉnh sửa quy tắc. Các quy tắc đã bật sẽ hiển thị dưới dạng danh sách kiểm tra trực tiếp bên dưới trường nhập — mỗi mục sẽ được đánh dấu ngay khi quy tắc tương ứng được thỏa mãn.

Các quy tắc khả dụng:
- **Min length** — số ký tự tối thiểu. Mặc định: 8.
- **Max length** — số ký tự tối đa. Mặc định: 32.
- **Uppercase letter** — ít nhất một ký tự A–Z.
- **Lowercase letter** — ít nhất một ký tự a–z.
- **Number** — ít nhất một chữ số.
- **Special character** — ít nhất một ký tự không phải chữ-số (ví dụ: `!@#$%`).

Mật khẩu chỉ hợp lệ khi tất cả các quy tắc đã bật đều được thỏa mãn.
### Định dạng số \{#number-format\}

Dropdown **Format** trong cài đặt input **Number** kiểm soát cách phân tích giá trị nhập vào:

- **Integer** — chỉ chấp nhận số nguyên (ví dụ: `4`).
- **Decimal (Point)** — số thập phân với dấu chấm làm dấu phân cách (ví dụ: `4.89`).
- **Decimal (Comma)** — số thập phân với dấu phẩy làm dấu phân cách (ví dụ: `4,89`).

Các giá trị không khớp với định dạng đã chọn sẽ được coi là không hợp lệ.

## Kích hoạt hành động theo sự kiện input \{#trigger-actions-on-input-events\}

:::link
Bài viết chính: [Hành động](onboarding-actions)
:::

Bạn có thể chạy các hành động phản hồi lại thao tác nhập của người dùng thông qua bảng **Interactions**:

- **On changed** — kích hoạt khi người dùng thay đổi giá trị của input. Có sẵn trên tất cả loại input.
- **On submit** — kích hoạt khi người dùng submit một text input bằng cách nhấn Enter hoặc Done trên bàn phím. Bộ chọn date và time không có trigger này.