Checkbox
import { Checkbox } from "zmp-ui";
Dùng để chọn một hoặc nhiều mục trong một nhóm các lựa chọn.
Ví dụ
Bảng thuộc tính
CheckboxProps
| Property | Type | Required | Description |
|---|---|---|---|
| checked | boolean | No | Trạng thái đánh dấu của checkbox.
Cần được sử dụng cùng với `onChange` để cập nhật lại giá trị. (default: false) |
| onChange | Function | No | Callback được gọi khi trạng thái của checkbox thay đổi. Cần phải cập nhật lại giá trị của `checked` nếu được truyền vào. |
| defaultChecked | boolean | No | Trạng thái mặc định của checkbox.
_Lưu ý: Thay đổi `defaultChecked` khi checkbox đã được render sẽ không có tác dụng._ (default: false) |
| disabled | boolean | No | Vô hiệu hóa checkbox. (default: false) |
| name | string | No | Tên của checkbox. Được sử dụng để gom nhóm các checkbox lại với nhau. Các checkbox có cùng `name` sẽ được xem là một nhóm. |
| label | string | No | Nhãn của checkbox, được hiển thị phía sau checkbox. Nếu cần hiển thị ReactNode, sử dụng `children` thay vì `label`. |
| value | string | number | No | Giá trị của checkbox. Khác với `checked` là trạng thái đánh dấu của checkbox, `value` được dùng để xác định giá trị của `CheckboxGroup` khi các checkbox bên trong nó được chọn. Nếu checkbox được chọn, giá trị của nó sẽ được thêm vào mảng `value` của `CheckboxGroup`, ngược lại sẽ được xóa khỏi mảng. |
| size | 'medium' | 'small' | No | Độ lớn của checkbox. |
| indeterminate | boolean | No | Nếu bật, checkbox sẽ có thêm trạng thái không xác định. Trạng thái không xác định là trạng thái trung gian giữa `checked` và `unchecked`. (default: false) |
| children | React.ReactNode | No | Nội dung được hiển thị thay cho `label`, ở phía sau checkbox. |
CheckboxGroupProps
| Property | Type | Required | Description |
|---|---|---|---|
| defaultValue | (string | number)[] | No | Giá trị mặc định của checkbox group. Các checkbox bên trong group có thuộc tính `value` nằm trong mảng này sẽ được chọn sẵn. _Lưu ý: Thay đổi `defaultValue` khi checkbox group đã được render sẽ không có tác dụng._ |
| value | (string | number)[] | No | Giá trị của checkbox group. Các checkbox bên trong group có thuộc tính `value` nằm trong mảng này sẽ được chọn. Cần được sử dụng cùng với `onChange` để cập nhật lại giá trị. |
| onChange | (checkedValue: (string | number)[]) => void | No | Callback được gọi khi trạng thái của checkbox group thay đổi. Cần phải cập nhật lại giá trị của `value` nếu được truyền vào. |
| disabled | boolean | No | Vô hiệu hóa checkbox group. |
| name | string | No | Tên của checkbox group. Được sử dụng để gom nhóm các checkbox lại với nhau. Các checkbox có cùng `name` sẽ được xem là một nhóm. |
| size | 'medium' | 'small' | No | Độ lớn của các checkbox trong group. |
| options | CheckboxProps[] | No | Thay vì render các `<Checkbox>` bên trong `<Checkbox.Group>`, có thể sử dụng `options` để quản lý các lựa chọn của group này. Tất cả các thuộc tính của `CheckboxProps` đều có thể được sử dụng trong `options`. |
| children | React.ReactNode | No |