---
sourceType: official-guide
sourceTypeMatchedRule: fallback
slug: MA/zaui/form/Radio
title: Radio
---
```ts
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

| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| checked | boolean | No | false | 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. |
| defaultChecked | boolean | No | false | Trạng thái đánh dấu mặc định của radio. |
| disabled | boolean | No | false | Trạng thái vô hiệu hoá của radio. |
| 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 | 'medium' | Độ lớn của radio. |
| 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

| Tên | Type | Required | Default | Mô tả |
| --- | --- | --- | --- | --- |
| 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 | false | Trạng thái vô hiệu hoá của radio group, cũng như các radio con bên trong. |
| 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 | 'medium' | Độ lớn của radio group. |
| 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`. |