{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/radio","result":{"data":{"current":{"frontmatter":{"title":"Radio","order":44,"brief":"Radio component allows the user to select one option from a relative small set.","icon":"doc-radio"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#when-to-use","title":"When to use"},{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic Usage"},{"url":"#extra-info","title":"Extra Info"},{"url":"#disabled","title":"Disabled"},{"url":"#advanced-mode","title":"Advanced Mode"},{"url":"#mutually-exclusive-set","title":"Mutually Exclusive Set"},{"url":"#vertical-arrangement","title":"vertical arrangement"},{"url":"#button-style","title":"Button Style"},{"url":"#card-style","title":"Card Style"},{"url":"#pure-card-style","title":"Pure Card Style"},{"url":"#options-configuration","title":"Options Configuration"}]},{"url":"#api-reference","title":"API Reference","items":[{"url":"#radio","title":"Radio"},{"url":"#radiogroup","title":"RadioGroup"}]},{"url":"#methods","title":"Methods","items":[{"url":"#radio-1","title":"Radio"}]},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"},{"url":"#keyboard-and-focus","title":"Keyboard and focus"}]},{"url":"#related-material","title":"Related Material"},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n \"localeCode\": \"en-US\",\n \"order\": 44,\n \"category\": \"Input\",\n \"title\": \"Radio\",\n \"subTitle\": \"Radio\",\n \"icon\": \"doc-radio\",\n \"brief\": \"Radio component allows the user to select one option from a relative small set.\"\n};\nvar makeShortcode = function makeShortcode(name) {\n return function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return mdx(\"div\", props);\n };\n};\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n var components = _ref.components,\n props = _objectWithoutProperties(_ref, _excluded);\n return mdx(MDXLayout, _extends({}, layoutProps, props, {\n components: components,\n mdxType: \"MDXLayout\"\n }), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"When to use\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Used to select a single state among multiple options.\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"The difference from Select is that all available options in Radio are visible by default, making it easier for users to choose in comparison, so there should not be too many options.\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Demos\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"How to import\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"import\",\n \"import\": true\n }, \"import { Radio, RadioGroup } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Basic Usage\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Radio } from '@douyinfe/semi-ui';\\n\\n() => (\\n Radio\\n);\\n\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Extra Info\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"extra\"), \" to add extra information, which can be any type of ReactNode.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { Radio } from '@douyinfe/semi-ui';\\n\\n\\n() => (\\n \\n Semi Design\\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Disabled\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { Radio, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [disabled, setDisabled] = useState(true);\\n\\n const toggleDisabled = () => {\\n setDisabled(!disabled);\\n };\\n\\n return (\\n \\n
\\n Disabled\\n \\n
\\n
\\n Disabled\\n \\n
\\n \\n
\\n
\\n \\n Click Again to Uncheck\\n \\n
\\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Mutually Exclusive Set\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"RadioGroup\"), \" to create a set of mutually exclusive options.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { Radio, RadioGroup } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [value, setValue] = useState(1);\\n \\n const onChange = (e) => {\\n console.log('radio checked', e.target.value);\\n setValue(e.target.value);\\n };\\n\\n return (\\n \\n A\\n B\\n C\\n D\\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"vertical arrangement\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"The radio elements in the group can be arranged horizontally or vertically by setting the \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"direction\"), \" property to the RadioGroup\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React from 'react';\\nimport { RadioGroup, Radio } from '@douyinfe/semi-ui';\\n\\n() => (\\n \\n A\\n B\\n C\\n D\\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Button Style\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can use \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type='button'\"), \" to set the button style type radio, and the button type radio supports three sizes.\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"It should be noted that the button type radio selector does not support auxiliary text (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"extra\"), \") and vertical arrangement (\", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"direction='vertical'\"), \").\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React, { useState } from 'react';\\nimport { Radio, RadioGroup, Space } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [value1, setValue1] = useState(1);\\n const [value2, setValue2] = useState(1);\\n const [value3, setValue3] = useState(1);\\n\\n const onChange1 = (e) => {\\n setValue1(e.target.value);\\n };\\n\\n const onChange2 = (e) => {\\n setValue2(e.target.value);\\n };\\n\\n const onChange3 = (e) => {\\n setValue3(e.target.value);\\n };\\n\\n return (\\n \\n \\n Instant push\\n Timed push\\n Dynamic push\\n \\n \\n Instant push\\n Timed push\\n Dynamic push\\n \\n \\n Instant push\\n Timed push\\n Dynamic push\\n \\n \\n );\\n};\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Card Style\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type='card'\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"RadioGroup\"), \" to achieve card style with background.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { RadioGroup, Radio } from '@douyinfe/semi-ui';\\n\\n() => (\\n \\n \\n Radio Title\\n \\n \\n Radio Title\\n \\n \\n Radio Title\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Pure Card Style\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can set \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"type='pureCard'\"), \" to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"RadioGroup\"), \" to achieve a pure card style with background and no radio.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true dir=\\\"column\\\"\",\n \"live\": \"true\",\n \"dir\": \"\\\"column\\\"\"\n }, \"import React from 'react';\\nimport { RadioGroup, Radio } from '@douyinfe/semi-ui';\\n\\n() => (\\n \\n \\n Radio Title\\n \\n \\n Radio Title\\n \\n \\n Radio Title\\n \\n \\n);\\n\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Options Configuration\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"You can pass an array of options to \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"RadioGroup\"), \" using \", mdx(\"inlineCode\", {\n parentName: \"p\"\n }, \"options\"), \" property to create a set.\"), mdx(\"pre\", {\n parentName: \"section\"\n }, mdx(\"code\", {\n parentName: \"pre\",\n \"className\": \"language-jsx\",\n \"metastring\": \"live=true\",\n \"live\": \"true\"\n }, \"import React, { useState } from 'react';\\nimport { RadioGroup } from '@douyinfe/semi-ui';\\n\\n() => {\\n const [value1, setValue1] = useState('Guest');\\n const [value2, setValue2] = useState('Developer');\\n const [value3, setValue3] = useState('Maintainer');\\n const plainOptions = ['Guest', 'Developer', 'Maintainer'];\\n const options = [\\n { label: 'Guest', value: 'Guest', extra: 'Semi Design', style: { width: 120 } },\\n { label: 'Developer', value: 'Developer', extra: 'Semi Design', style: { width: 120 } },\\n { label: 'Maintainer', value: 'Maintainer', extra: 'Semi Design', style: { width: 120 } },\\n ];\\n const optionsWithDisabled = [\\n { label: 'Guest', value: 'Guest' },\\n { label: 'Developer', value: 'Developer' },\\n { label: 'Maintainer', value: 'Maintainer', disabled: true },\\n ];\\n \\n const onChange1 = (e) => {\\n console.log('radio1 checked', e.target.value);\\n setValue1(e.target.value);\\n };\\n\\n const onChange2 = (e) => {\\n console.log('radio2 checked', e.target.value);\\n setValue2(e.target.value);\\n };\\n\\n const onChange3 = (e) => {\\n console.log('radio3 checked', e.target.value);\\n setValue3(e.target.value);\\n };\\n\\n return (\\n \\n \\n
\\n
\\n \\n
\\n
\\n \\n
\\n );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"API Reference\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Radio\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"PROPERTIES\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"addonClassName\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"classname of content wrapper\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"addonId\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"id of addon node, aria-labelledby refers to this id, if not set, it will generate an id randomly \", mdx(\"br\", null), mdx(\"strong\", {\n parentName: \"td\"\n }, \"provided after v2.11.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"addonStyle\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"inline style of content wrapper\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"object\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"aria-label\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Label of Radio\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"autoFocus\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Automatically focus the form control when the page is loaded\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"checked\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Specify whether it is currently selected\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Class name\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"defaultChecked\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Checked by default\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"disabled\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Disable the radio\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"extra\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Extra information displayed\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"extraId\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"id of extra node. aria-describedby refers to this id, if not set, it will randomly generate an id \", mdx(\"br\", null), mdx(\"strong\", {\n parentName: \"td\"\n }, \"provided after v2.11.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"ReactNode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"mode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"In advanced mode, options can be clicked to uncheck, one of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"advanced\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"name\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"name\"), \" attribute passed to \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"input[type=\\\"radio\\\"]\"), \" in the Radio component, Radios with the same \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"name\"), \" belong to the same RadioGroup,The \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"name\"), \" attribute can refer to \", mdx(\"a\", {\n parentName: \"td\",\n \"href\": \"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/radio#value\"\n }, \"MDN Radio\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"preventScroll\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Indicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the user\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Inline style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set the type of radio, one of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"button\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"card\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"pureCard\"), \" \", mdx(\"br\", null), mdx(\"strong\", {\n parentName: \"td\"\n }, \"This api is provided after v2.18.0\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Compared based on value to determine whether the option is selected\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when the selected option changes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Function (e: Event)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onMouseEnter\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The callback function when the mouse moves into the option\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(e:Event)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onMouseLeave\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The callback function when the mouse moves out the option\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"function(e:Event)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")))), mdx(\"h3\", {\n parentName: \"section\"\n }, \"RadioGroup\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"PROPERTIES\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Instructions\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Type\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Default\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"aria-label\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Label of RadioGroup\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"buttonSize\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The size of the button type radio\\uFF0C one of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"small\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"middle\"), \"\\u3001\", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"large\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"middle\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"className\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Class name\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"defaultValue\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Options selected by default\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"direction\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Arrangement direction of Radio, optional 'horizontal' / 'vertical'\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"'horizontal'\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"disabled\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Disable the entire group\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"boolean\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"false\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"mode\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"In advanced mode, options can be clicked to uncheck, one of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"advanced\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"name\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"The \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"name\"), \" attribute for all \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"input[type=\\\"radio\\\"]\"), \" in RadioGroup\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"options\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set child options through configuration\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Array\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Inline style\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"CSSProperties\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n })), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Used to set the currently selected value\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string \", \"|\", \" number\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"type\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Set the type of radio, one of \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"button\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"card\"), \", \", mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"pureCard\")), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"string\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, mdx(\"inlineCode\", {\n parentName: \"td\"\n }, \"default\"))), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"onChange\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Callback function when the selected option changes\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Function (e: Event)\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"-\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Methods\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Radio\"), mdx(\"table\", {\n parentName: \"section\"\n }, mdx(\"thead\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"thead\"\n }, mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Name\"), mdx(\"th\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Description\"))), mdx(\"tbody\", {\n parentName: \"table\"\n }, mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"blur()\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Remove focus\")), mdx(\"tr\", {\n parentName: \"tbody\"\n }, mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"focus()\"), mdx(\"td\", {\n parentName: \"tr\",\n \"align\": null\n }, \"Get focus\"))))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Accessibility\"), mdx(\"h3\", {\n parentName: \"section\"\n }, \"ARIA\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-label\"), \": used to explain the role of Radio or RadioGroup\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-labelledby\"), \" points to the addon node, used to explain the content of Radio\"), mdx(\"li\", {\n parentName: \"ul\"\n }, mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"aria-describedby\"), \" points to the extra node, which is used to explain the content of Radio\")), mdx(\"h3\", {\n parentName: \"section\"\n }, \"Keyboard and focus\"), mdx(\"p\", {\n parentName: \"section\"\n }, \"WAI-ARIA: \", mdx(\"a\", {\n parentName: \"p\",\n \"href\": \"https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/\"\n }, \"https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/\")), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"RadioGroup can be focused, the initial focus acquisition rules are as follows\\uFF1A\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"When there is no selected item in the RadioGroup, the initial focus is on the first Radio item;\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"When there are selected items in the RadioGroup, the initial focus is on the selected Radio item.\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"For radios belonging to the same radiogroup:\", mdx(\"ul\", {\n parentName: \"li\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"You can use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Right arrow\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Down arrow\"), \" to move the focus to the next Radio item, uncheck the previously focused Radio item, and select the currently focused Radio item;\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"You can Use \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Left Arrow\"), \" or \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Up Arrow\"), \" to move the focus to the previous Radio item, at the same time uncheck the previously focused Radio item, and select the currently focused Radio item.\"))), mdx(\"li\", {\n parentName: \"ul\"\n }, \"If there is no item selected in the RadioGroup, you can use the \", mdx(\"inlineCode\", {\n parentName: \"li\"\n }, \"Space\"), \" key to select the initial focus.\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Related Material\"), mdx(\"p\", {\n parentName: \"section\"\n }, mdx(\"semi-material-list\", {\n code: \"123\"\n }))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Content Guidelines\"), mdx(\"ul\", {\n parentName: \"section\"\n }, mdx(\"li\", {\n parentName: \"ul\"\n }, \"Capitalize the first letter\"), mdx(\"li\", {\n parentName: \"ul\"\n }, \"No punctuation\"))), mdx(\"section\", null, mdx(\"h2\", {\n parentName: \"section\"\n }, \"Design Tokens\"), mdx(DesignToken, {\n mdxType: \"DesignToken\"\n })));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/input/radio","next":{"fields":{"slug":"zh-CN/input/radio"},"id":"ef7295b6-4927-54ff-9371-709126242c37","frontmatter":{"title":"Radio 单选框","localeCode":"zh-CN","icon":"doc-radio","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/pincode"},"id":"e7c3a0d4-cbbf-5a92-9ad4-975207e7fc41","frontmatter":{"title":"PinCode 验证码输入","localeCode":"zh-CN","icon":"doc-pincode","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}