ComponentTiện ích
Form (with i18n)
Form (with i18n) thuộc nhóm Tiện ích. Xem demo trực tiếp, cách tích hợp và các lưu ý triển khai.
Bắt đầu nhanh
Import Form (with i18n) từ entry của gói Free. Các ví dụ bên dưới thể hiện những kiểu tương tác và cấu hình được hỗ trợ.
component.tsxtsx
import { Form } from '@underverse-ui/underverse';Ví dụ tương tác
Dùng thử Form (with i18n) thật, xem mã ví dụ và tra cứu các prop đã được mô tả.
Đang tải ví dụ tương tác…
Tham chiếu
Tham chiếu API
Tra cứu các thuộc tính, kiểu dữ liệu được chấp nhận, giá trị mặc định và lưu ý về hành vi.
Dữ liệu được sinh từ API TypeScript công khai của thư viện. Kiểu dữ liệu, thuộc tính bắt buộc và giá trị mặc định luôn đồng bộ với mã nguồn.
Form
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
childrenBắt buộc | Mã nguồn chưa cung cấp mô tả bổ sung. | React.ReactNode | Bắt buộc |
onSubmitBắt buộc | Hàm xử lý submit nhận dữ liệu form. | SubmitHandler<T> | Bắt buộc |
initialValues | Giá trị khởi tạo cho form. | Partial<T> | — |
validationSchema | Schema xác thực (tùy chọn). | Record<string, any> | — |
className | Class tuỳ chỉnh cho thẻ form. | string | — |
size | Kích thước chung cho control (sm, md, lg). | FormControlSize | — |
FormActions
Hàm| API | Kiểu | Mô tả |
|---|---|---|
| FormActions | (props: React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>) => React.ReactNode | Mã nguồn chưa cung cấp mô tả bổ sung. |
FormCheckbox
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
nameBắt buộc | Tên trường để bind. | string | Bắt buộc |
label | Mã nguồn chưa cung cấp mô tả bổ sung. | React.ReactNode | — |
labelClassName | Mã nguồn chưa cung cấp mô tả bổ sung. | string | — |
containerClassName | Mã nguồn chưa cung cấp mô tả bổ sung. | string | — |
FormControl
Hàm| API | Kiểu | Mô tả |
|---|---|---|
| FormControl | (props: React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>) => React.ReactNode | Mã nguồn chưa cung cấp mô tả bổ sung. |
FormDescription
Hàm| API | Kiểu | Mô tả |
|---|---|---|
| FormDescription | (props: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>) => React.ReactNode | Mã nguồn chưa cung cấp mô tả bổ sung. |
FormField
Hàm| API | Kiểu | Mô tả |
|---|---|---|
| FormField | <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => React.JSX.Element | Mã nguồn chưa cung cấp mô tả bổ sung. |
FormInput
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
variant | Mã nguồn chưa cung cấp mô tả bổ sung. | "default" | "filled" | "outlined" | "minimal" | — |
size | Mã nguồn chưa cung cấp mô tả bổ sung. | FormControlSize | — |
loading | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | — |
borderMode | Mã nguồn chưa cung cấp mô tả bổ sung. | BorderMode | — |
nameBắt buộc | Tên trường để bind. | string | Bắt buộc |
success | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | — |
description | Mã nguồn chưa cung cấp mô tả bổ sung. | string | — |
error | Mã nguồn chưa cung cấp mô tả bổ sung. | string | — |
maxLength | Mã nguồn chưa cung cấp mô tả bổ sung. | number | — |
label | Mã nguồn chưa cung cấp mô tả bổ sung. | string | — |
labelClassName | Custom class for label | string | — |
leftIcon | Mã nguồn chưa cung cấp mô tả bổ sung. | React.ComponentType<{ className?: string }> | — |
rightIcon | Mã nguồn chưa cung cấp mô tả bổ sung. | React.ComponentType<{ className?: string }> | — |
clearable | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | — |
onClear | Mã nguồn chưa cung cấp mô tả bổ sung. | () => void | — |
hint | Mã nguồn chưa cung cấp mô tả bổ sung. | string | — |
counter | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | — |
rightAddon | Custom content rendered inside the input container (positioned absolutely) | React.ReactNode | — |
rightSection | Custom content attached to the end of the input, after built-in controls | React.ReactNode | — |
FormItem
Hàm| API | Kiểu | Mô tả |
|---|---|---|
| FormItem | (props: React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>) => React.ReactNode | Mã nguồn chưa cung cấp mô tả bổ sung. |
FormLabel
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
required | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | — |
FormMessage
Hàm| API | Kiểu | Mô tả |
|---|---|---|
| FormMessage | (props: React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>) => React.ReactNode | Mã nguồn chưa cung cấp mô tả bổ sung. |
FormSubmitButton
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
onClick | Mã nguồn chưa cung cấp mô tả bổ sung. | (event: React.MouseEvent<HTMLButtonElement>) => void | — |
children | Mã nguồn chưa cung cấp mô tả bổ sung. | React.ReactNode | — |
type | Mã nguồn chưa cung cấp mô tả bổ sung. | "button" | "submit" | "reset" | — |
icon | Mã nguồn chưa cung cấp mô tả bổ sung. | React.ComponentType<{ className?: string }> | — |
iconRight | Mã nguồn chưa cung cấp mô tả bổ sung. | React.ComponentType<{ className?: string }> | — |
variant | Mã nguồn chưa cung cấp mô tả bổ sung. | keyof typeof VARIANT_STYLES_BTN | — |
size | Mã nguồn chưa cung cấp mô tả bổ sung. | keyof typeof SIZE_STYLES_BTN | — |
className | Mã nguồn chưa cung cấp mô tả bổ sung. | string | — |
iConClassName | Mã nguồn chưa cung cấp mô tả bổ sung. | string | — |
disabled | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | — |
loading | Khoá và hiển thị bận khi submit. | boolean | — |
fullWidth | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | — |
title | Mã nguồn chưa cung cấp mô tả bổ sung. | string | — |
spinner | Mã nguồn chưa cung cấp mô tả bổ sung. | React.ComponentType<{ className?: string }> | — |
loadingText | Mã nguồn chưa cung cấp mô tả bổ sung. | React.ReactNode | — |
preserveChildrenOnLoading | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | — |
preventDoubleClick | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | — |
lockMs | Mã nguồn chưa cung cấp mô tả bổ sung. | number | — |
asContainer | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | — |
noWrap | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | — |
noHoverOverlay | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | — |
gradient | Mã nguồn chưa cung cấp mô tả bổ sung. | boolean | — |
borderMode | Mã nguồn chưa cung cấp mô tả bổ sung. | BorderMode | — |
useFormField
Hàm| API | Kiểu | Mô tả |
|---|---|---|
| useFormField | () => { invalid: boolean; isDirty: boolean; isTouched: boolean; isValidating: boolean; error?: import("react-hook-form/dist/index").FieldError | undefined; id: string; name: string; formItemId: string; formDescriptionId: string; formMessageId: string; } | Mã nguồn chưa cung cấp mô tả bổ sung. |
Hướng dẫn sử dụng
Dùng Form (with i18n) như hạ tầng thay vì trang trí. Hành vi cần tường minh, có kiểm thử trường hợp biên và chuyển lỗi về ứng dụng sử dụng.
Trợ năng
Khi dùng Form (with i18n), hãy giữ trạng thái focus dễ nhận biết, cung cấp tên truy cập khi cần và kiểm tra bàn phím cùng trình đọc màn hình trong ngữ cảnh thực tế.