{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<p>Radio</p>\n<h3 id=\"When To Use\">When to use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>Radio buttons allow the user to select a single option from data-set. User can use the radio button for exlusive opration and see all the options side by side. Otherwsie, consider using <code>&lt;DropDown/&gt;</code> that take up less space than showing all the option.</p>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Radio\">Radio <a class=\"header-anchor scroll-count-item\" href=\"#Radio\" data-scroll-id=\"Radio\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>id</td>\n<td>Id of the input</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>checked</td>\n<td>To set radio button is checked</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultChecked</td>\n<td>To set radio button default to be checked</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>label</td>\n<td>To set the radio label</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback on check state change<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>checked</em>: Is checked<br><em>event</em>: DOM event</td>\n<td>(checked: boolean, event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onMouseEnter</td>\n<td>Callback on mouse enter</td>\n<td>(e: React.MouseEvent&lt;HTMLInputElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onMouseLeave</td>\n<td>Callback on mouse leave</td>\n<td>(e: React.MouseEvent&lt;HTMLInputElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Set radio button disable to be used</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>Value of radio</td>\n<td>RadioValue</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>name</td>\n<td>Form item name</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Set radio to preview state</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Customized rendering content function in preview mode<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>checked</em>: Is checked<br><em>props</em>: The props of the radio<br><strong>return</strong>:<br>The content of item</td>\n<td>(checked: boolean, props: RadioProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Radio Group\">Radio.Group <a class=\"header-anchor scroll-count-item\" href=\"#Radio Group\" data-scroll-id=\"Radio Group\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>Form name</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>The value of the Item witch is selected in radio group (controlled)</td>\n<td>RadioValue</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>The value of the Item witch is default selected in radio group (uncontrolled)</td>\n<td>RadioValue</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>component</td>\n<td>Specify jsx tag name</td>\n<td>React.ElementType</td>\n<td>&apos;div&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback on value change<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>value</em>: The selected value<br><em>event</em>: Dom Event</td>\n<td>(value: RadioValue, event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>All the radios in group are disable to be used</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>shape</td>\n<td>Shape type</td>\n<td>&apos;normal&apos; | &apos;button&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>size</td>\n<td>Used with <code>shape</code> prop&#xFF0C;valid when shape is set to button</td>\n<td>&apos;large&apos; | &apos;medium&apos; | &apos;small&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>dataSource</td>\n<td>List of options</td>\n<td>Array&lt;RadioValue&gt; | Array&lt;RadioValueItem&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>To set radio button by setting children components</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>direction</td>\n<td>How items are arranged</td>\n<td>&apos;hoz&apos; | &apos;ver&apos;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>-</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Customized rendering content function in preview mode<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>previewed</em>: Previewed item data&#xFF0C;<br><em>props</em>: The props of the previewed item<br><strong>return</strong>:<br>The content of item</td>\n<td>(previewed: RadioValueItem | object, props: GroupProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Radio Value Item\">RadioValueItem <a class=\"header-anchor scroll-count-item\" href=\"#Radio Value Item\" data-scroll-id=\"Radio Value Item\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>label</td>\n<td>-</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>-</td>\n<td>RadioValue</td>\n<td>-</td>\n<td>yes</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>-</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Radio Value\">RadioValue <a class=\"header-anchor scroll-count-item\" href=\"#Radio Value\" data-scroll-id=\"Radio Value\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">RadioValue</span> <span class=\"token operator\">=</span> <span class=\"token builtin\">string</span> <span class=\"token operator\">|</span> <span class=\"token builtin\">number</span> <span class=\"token operator\">|</span> <span class=\"token builtin\">boolean</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">KeyBoard</th>\n<th style=\"text-align:left\">Descripiton</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Tab</td>\n<td style=\"text-align:left\">Get the focus, if there is no selection, it is the first one, then you can select it with a space. If it is selected, it will focus on the selected item, and then left-right will navigate and select radio.</td>\n</tr>\n</tbody>\n</table>\n"}