ant-design/index.en-US.md at d74f5918b6442174a2fb80c255ffe72362ec3400

mirror of https://github.com/ant-design/ant-design.git synced 2025-01-23 01:45:05 +08:00

feat: add default name generation for RadioGroup component better a11y (#52076 )

* feat: add default name generation for RadioGroup component better a11y

* feat(radio): implement useStableId hook for consistent ID generation in RadioGroup

* test: update snapshot

* chore: remove unused demo code snippet from form documentation

* test: enhance demo testing by adding ignoreAttributes option for snapshot matching

* fix(tests): correct logic for skipping tests and enhance snapshot matching for demo tests

* Revert "test: enhance demo testing by adding ignoreAttributes option for snapshot matching"

* test: mock useId for stable ID generation in snapshot tests

* chore: trigger CI build

* docs(radio): update name property description to clarify fallback behavior for RadioGroup

* Update index.zh-CN.md

Signed-off-by: Jony J <1844749591@qq.com>

---------

Signed-off-by: Jony J <1844749591@qq.com>

2024-12-23 10:55:45 +08:00

4.0 KiB

Raw Blame History

When To Use

Used to select a single state from multiple options.
The difference from Select is that Radio is visible to the user and can facilitate the comparison of choice, which means there shouldn't be too many of them.

Examples

Basic disabled Radio Group Vertical Radio.Group Block Radio.Group Radio.Group group - optional radio style Radio.Group with name Size Solid radio button Badge style Wireframe Component Token Upload Debug

API

Common props ref：Common props

Radio/Radio.Button

Property	Description	Type	Default
autoFocus	Whether get focus when component mounted	boolean	false
checked	Specifies whether the radio is selected	boolean	false
defaultChecked	Specifies the initial state: whether or not the radio is selected	boolean	false
disabled	Disable radio	boolean	false
value	According to value for comparison, to determine whether the selected	any	-

RadioGroup

Radio group can wrap a group of Radio。

Property	Description	Type	Default	Version
buttonStyle	The style type of radio button	`outline` \| `solid`	`outline`
defaultValue	Default selected value	any	-
disabled	Disable all radio buttons	boolean	false
name	The `name` property of all `input[type="radio"]` children. If not set, it will fallback to a randomly generated name	string	-
options	Set children optional	string[] \| number[] \| Array<CheckboxOptionType>	-
optionType	Set Radio optionType	`default` \| `button`	`default`	4.4.0
size	The size of radio button style	`large` \| `middle` \| `small`	-
value	Used for setting the currently selected value	any	-
block	Option to fit RadioGroup width to its parent width	boolean	false	5.21.0
onChange	The callback function that is triggered when the state changes	function(e:Event)	-

CheckboxOptionType

Property	Description	Type	Default	Version
label	The text used to display as the Radio option	`string`	-	4.4.0
value	The value associated with the Radio option	`string` \| `number` \| `boolean`	-	4.4.0
style	The style to apply to the Radio option	`React.CSSProperties`	-	4.4.0
disabled	Specifies whether the Radio option is disabled	`boolean`	`false`	4.4.0
title	Adds the Title attribute value	`string`	-	4.4.0
id	Adds the Radio Id attribute value	`string`	-	4.4.0
onChange	Triggered when the value of the Radio Group changes	`(e: CheckboxChangeEvent) => void;`	-	4.4.0
required	Specifies whether the Radio option is required	`boolean`	`false`	4.4.0

Methods

Radio

Name	Description
blur()	Remove focus
focus()	Get focus

4.0 KiB Raw Blame History Unescape Escape