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
children	ReactNode		Các Option được sử dụng bên trong Select.
closeOnSelect	boolean	false	Tự động đóng hộp thoại lựa chọn khi người dùng chọn xong một lựa chọn.
defaultOpen	boolean	false	Mặ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.
defaultValue	SelectValue | SelectValue[]		Tươ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.
disabled	boolean	false	Trạng thái vô hiệu hoá của Select, cũng như các Option bên trong nó.
errorText	string		Error 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.
helperText	string		Helper 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.
label	string | ReactNode		Nộ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.
mask	boolean	true	Mask 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ở.
maskCloseable	boolean	true	Đóng hộp thoại lựa chọn khi người dùng nhấn vào mask.
multiple	boolean	false	Cho phép chọn nhiều lựa chọn cùng một lúc.
name	string		Tê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.
placeholder	string		Placeholder của input. Được hiển thị khi chưa có option nào được chọn.
status	InputStatus		Trạ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.
value	SelectValue | SelectValue[]		Mả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ị.
onChange	(selected: SelectValueType | SelectValueType[]) => void		Callback đượ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) => void		Callback đượ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.

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>
  );
};