Chuyển tới nội dung chính

Select

import { Select } from "zmp-ui";

Dùng để cho phép người dùng lựa chọn một hoặc nhiều mục trong các nhóm lựa chọn

Ví dụ

Bảng thuộc tính

SelectProps

PropertyTypeRequiredDescription
valueSelectValue | SelectValue[]NoMảng các `value` của các `Option` được chọn (nếu `multiple` được bật) hoặc `value` của `Option` được chọn đối với chế độ single select. Cần được sử dụng cùng với `onChange` để cập nhật giá trị.
defaultValueSelectValue | SelectValue[]NoTương tự như `value`, nhưng được sử dụng để thiết lập giá trị mặc định cho `Select`. Thay đổi giá trị này sau khi render sẽ không có tác dụng.
multiplebooleanNoCho phép chọn nhiều lựa chọn cùng một lúc. (default: false)
childrenReactNodeNoCác `Option` được sử dụng bên trong `Select`.
defaultOpenbooleanNoMặc định mở hộp thoại chọn lựa hay không. Thay đổi giá trị này sau khi render sẽ không có tác dụng. (default: false)
disabledbooleanNoTrạng thái vô hiệu hoá của `Select`, cũng như các `Option` bên trong nó. (default: false)
onChange(selected: SelectValueType | SelectValueType[]) => voidNoCallback được gọi khi giá trị của `Select` thay đổi. Tham số truyền vào là giá trị mới của `Select`, có thể là một mảng nếu `multiple` được bật. Cần cập nhật lại giá trị của `value` nếu có truyền vào.
onVisibilityChange(visibilityState: boolean) => voidNoCallback được gọi khi hộp thoại chọn lựa được mở, cụ thể là sau người dùng nhấn vào input trigger.
labelstring | ReactNodeNoNội dung được hiển thị trên các nhãn của `Select`. Các vị trí được hiển thị bao gồm: phía trên input trigger và tiêu đề ở đầu hộp thoại chọn lựa.
helperTextstringNoHelper text là phần văn bản ngắn nằm dưới các ô nhập liệu. Nội dung của các văn bản này thường chứa thông tin hướng dẫn giúp người dùng hiểu rõ hơn về tác dụng hoặc mô tả định dạng của dữ liệu được khuyến khích nhập vào.
errorTextstringNoError text là phần văn bản ngắn nằm dưới các ô nhập liệu. Nội dung của các văn bản này thường chứa thông tin cảnh báo về lỗi của dữ liệu được nhập vào, cũng như hướng dẫn cách khắc phục. `errorText` sẽ được hiển thị thay cho `helperText` khi `status` có giá trị là `error`.
statusInputStatusNoTrạng thái hợp lệ của input. Nếu là `error`, input sẽ có màu cảnh báo kèm theo `errorText`, ngược lại input sẽ có màu trung hoà kèm theo `helperText`.
namestringNoTên định danh của `Select`. Thường được sử dụng để phân biệt các input với nhau trong cùng một form.
placeholderstringNoPlaceholder của input. Được hiển thị khi chưa có option nào được chọn.
maskbooleanNoMask là một lớp overlay màu xám được phủ lên các thành phần bên dưới hộp thoại, ngăn không cho người dùng tương tác với các nội dung đó và tập trung vào hộp thoại được mở. (default: true)
maskCloseablebooleanNoĐóng hộp thoại lựa chọn khi người dùng nhấn vào mask. (default: true)
closeOnSelectbooleanNoTự động đóng hộp thoại lựa chọn khi người dùng chọn xong một lựa chọn. (default: false)

OptGroupProps

PropertyTypeRequiredDescription
labelstringNoNhãn của nhóm các option có liên quan, được hiển thị ở phía trên đầu các lựa chọn.
childrenReactNodeNoCác `Option` cần được nhóm lại với nhau.

SelectOptionProps

PropertyTypeRequiredDescription
childrenReactNodeNo
titlestringNoNội dung được hiển thị đến người dùng.
valueSelectValueNoGiá trị của lựa chọn, được sử dụng để định dang các option đang được chọn bên trong `value` của `Select`.
disabledbooleanNoTrạng thái vô hiệu hoá của lựa chọn. Người dùng vẫn có thể thấy được option này, nhưng không chọn nó bên trong `Select`. (default: false)