Radio
import { Radio } from "zmp-ui";
Dùng để cho phép người dùng chọn một mục duy nhất trong nhóm các lựa chọn
Ví dụ
Bảng thuộc tính
RadioProps
| Property | Type | Required | Description |
|---|---|---|---|
| checked | boolean | No | Trạng thái được chọn của radio. Cần được sử dụng cùng với `onChange` để thay đổi giá trị khi người dùng thao tác. (default: false) |
| defaultChecked | boolean | No | Trạng thái đánh dấu mặc định của radio. (default: false) |
| disabled | boolean | No | Trạng thái vô hiệu hoá của radio. (default: false) |
| name | string | No | Tên định danh của radio. Được sử dụng để nhóm các radio lại với nhau trong `Radio.Group`. |
| label | string | No | Nhãn của radio, được hiển thị bên cạnh radio. Nếu cần hiển thị ReactNode, sử dụng `children`. |
| value | RadioValueType | No | Giá trị của radio, được sử dụng để nhận biết radio nào được chọn trong `Radio.Group`. |
| size | 'medium' | 'small' | No | Độ lớn của radio. (default: 'medium') |
| children | React.ReactNode | No | Được sử dụng thay cho `label` khi cần hiển thị nội dung phức tạp hơn. Được render bên phải radio. |
| onChange | (event: ChangeEvent) => void | No | Callback được gọi khi giá trị của radio thay đổi. Nếu `checked` được sử dụng, cần phải cập nhật lại giá trị của `checked` trong callback này. |
RadioGroupProps
| Property | Type | Required | Description |
|---|---|---|---|
| defaultValue | RadioValueType | No | `Radio` với `value` khớp với giá trị này sẽ được chọn sẵn. Thay đổi giá trị này sau khi render sẽ không có tác dụng. |
| value | RadioValueType | No | Giá trị hiện tại của radio group. Cụ thể hơn là thuộc tính `value` của `Radio` đang được chọn trong nhóm các `Radio` có cùng `name`. Cần được sử dụng cùng với `onChange` để thay đổi giá trị khi người dùng thao tác. |
| disabled | boolean | No | Trạng thái vô hiệu hoá của radio group, cũng như các radio con bên trong. (default: false) |
| name | string | No | Tên định danh của radio group. Được sử dụng để nhóm các radio lại với nhau. |
| size | 'medium' | 'small' | No | Độ lớn của radio group. (default: 'medium') |
| options | RadioProps[] | No | Mảng các thiết lập để tạo ra các radio trong group. Nếu cần hiển thêm khác phần tử khác radio, sử dụng `children` thay vì `options`. |
| onChange | (value: RadioValueType) => void | No | Callback được gọi khi giá trị của radio group thay đổi. Cụ thể hơn là khi có m ột radio trong group được chọn hoặc thay thế radio đang được chọn trước đó. Nếu `value` được sử dụng, cần phải cập nhật lại giá trị của `value` trong callback này. |
| children | React.ReactNode | No | Dùng để render các `` trong group cũng như các phần tử khác. Không sử dụng cùng với `options`. |