Radio

基础多选框

radio 组件主要有三种状态,分别是: defaultdisabledreadonly。然后分别每种状态有选中和未选中的样式。
需要注意,HTML 标准并不支持 readonly 属性,这是组件单独封装的。
Not Checked Style:
Checked Style:
Edit Code

受控按钮

checked 属性控制是否选中
Edit Code

单选框 Group

将多个 radio 组件放在一个 radio-group 组件中,注意要设置 defaultValue 或者value 属性才能实现单选框组的功能。
Edit Code

Button Radio

属于自定义的 radio 组件。其实还可以加入背景移动的动画,我在创意案例里面用 motion/react 来实现一下。
Edit Code