Select

Cập nhật lần cuối: 27/05/2022

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

Open Sandbox

import React from "react";
import { Page, Box, Text, Select } from "zmp-ui";

const { OtpGroup, Option } = Select;

export default () => {
  return (
    <Page className="section-container">
      <Text.Title size="small">Select</Text.Title>
      <Box mt={6}>
        <Select
          label="Label"
          helperText="Helper text"
          placeholder="Placeholder"
          defaultValue="1"
        >
          <OtpGroup label="Group 1">
            <Option value="1" title="Option 1" />
            <Option value="2" title="Option 2" />
          </OtpGroup>
          <OtpGroup label="Group 2">
            <Option value="3" title="Option 3" />
            <Option value="4" title="Option 4" />
            <Option value="5" title="Option 5" disabled />
            <Option value="6" title="Option 6" />
          </OtpGroup>
        </Select>
      </Box>
      <Box mt={6}>
        <Select
          label="Label"
          helperText="Helper text"
          placeholder="Placeholder"
          multiple
          defaultValue={[]}
        >
          <Option value="1" title="Option 1" />
          <Option value="2" title="Option 2" />
          <Option value="3" title="Option 3" />
          <Option value="4" title="Option 4" />
          <Option value="5" title="Option 5" disabled />
          <Option value="6" title="Option 6" />
        </Select>
      </Box>
    </Page>
  );
};