Radio

Cập nhật lần cuối: 16/04/2025

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

Name	Type	Default	Description
checked	boolean	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.
children	React.ReactNode		Đượ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.
defaultChecked	boolean	false	Trạng thái đánh dấu mặc định của radio.
disabled	boolean	false	Trạng thái vô hiệu hoá của radio.
label	string		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.
name	string		Tên định danh của radio. Được sử dụng để nhóm các radio lại với nhau trong Radio.Group.
size	'medium'|'small'	'medium'	Độ lớn của radio.
value	RadioValueType		Giá trị của radio, được sử dụng để nhận biết radio nào được chọn trong Radio.Group.
onChange	(event: ChangeEvent) => void		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

Name	Type	Default	Description
children	React.ReactNode		Dùng để render các <Radio> trong group cũng như các phần tử khác. Không sử dụng cùng với options.
defaultValue	RadioValueType		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.
disabled	boolean	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		Tên định danh của radio group. Được sử dụng để nhóm các radio lại với nhau.
options	RadioProps[]		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.
size	'medium'|'small'	'medium'	Độ lớn của radio group.
value	RadioValueType		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.
onChange	(value: RadioValueType) => void		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.