Select
Tạo giao diện 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
Properties
Select
| Name | Type | Default | Description | Minimum Version |
|---|---|---|---|---|
| value | SelectValue | SelectValue[] | Option/ Các Option đã chọn, controlled component | ||
| defaultValue | SelectValue | SelectValue[] | Option/ Các Option chọn lúc khỏi tạo, uncontrolled component | ||
| multiple | boolean | false | Bật chế độ chọn nhiều option | |
| defaultOpen | boolean | false | Mặc định mở select bottom sheet hay không | |
| closeOnSelect | boolean | false | Đóng select sheet modal khi chọn option (single choice) | 1.5.5 |
| disabled | boolean | Vô hiệu hoá Select input | ||
| onChange | function | Thêm event handler khi thay đổi option lựa chọn | ||
| onVisibilityChange | function | Thêm event handler khi select bottom sheet thay đổi trạng thái mở/đóng | ||
| label | string | Thêm Label hiển thị phía trên Input và tiêu đề cho Select Input và Select bottom sheet | ||
| helperText | string | Helper text hiển thị phía dưới của field input. | ||
| errorText | string | Text hiển thị khi status của field input là error | ||
| status | InputStatus | Trạng thái của field input. Nhận các giá trị: success | error | ||
| name | string | Thêm name cho input field | ||
| placeholder | string | Thêm placeholder cho input trong trường hợp không có option nào đã được chọn |
Example
import React from "react";
import { Page, Box, Text, Select } from "zmp-ui";
const { OtpGroup, Option } = Select;
export default () => {
return (
<Text.Title size="small">Select</Text.Title>
<Box mt={6}>
<Select
label="Label"
helperText="Helper text"
placeholder="Placeholder"
defaultValue="1"
>
<OtpGroup label="Group 1">
</OtpGroup>
<OtpGroup label="Group 2">
</OtpGroup>
</Select>
</Box>
<Box mt={6}>
<Select
label="Label"
helperText="Helper text"
placeholder="Placeholder"
multiple
defaultValue={[]}
>
</Select>
</Box>
);
};