{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<p>Checkbox</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>Checkbox is used to verify which options you want selected from a group. If you have only a single option, do not use the checkbox, use the on/off switch.</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=\"Checkbox\">Checkbox <a class=\"header-anchor scroll-count-item\" href=\"#Checkbox\" data-scroll-id=\"Checkbox\">#</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<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>className</td>\n<td>ClassName</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>id</td>\n<td>Checkbox id, mounted on the input</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>style</td>\n<td>Custom inline style</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>checked</td>\n<td>Checked status</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>Checkbox value</td>\n<td>ValueItem</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>Name</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultChecked</td>\n<td>Default checked status</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disabled</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>label</td>\n<td>Label</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>indeterminate</td>\n<td>Checkbox middle status, only affects the style of Checkbox, and does not affect its checked property</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultIndeterminate</td>\n<td>Checkbox default middle status, only affects the style of Checkbox, and does not affect its checked property</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Status change event</td>\n<td>(checked: boolean, e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onMouseEnter</td>\n<td>Mouse enter event</td>\n<td>(e: React.MouseEvent&lt;HTMLInputElement | HTMLLabelElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onMouseLeave</td>\n<td>Mouse leave event</td>\n<td>(e: React.MouseEvent&lt;HTMLInputElement | HTMLLabelElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Is preview</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>1.19</td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Custom rendering content<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>checked</em>: Is checked<br><em>props</em>: All props<br><strong>return</strong>:<br>Custom rendering content</td>\n<td>(checked: boolean, props: CheckboxProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>1.19</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Checkbox Group\">Checkbox.Group <a class=\"header-anchor scroll-count-item\" href=\"#Checkbox Group\" data-scroll-id=\"Checkbox 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<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>className</td>\n<td>Custom className</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>style</td>\n<td>Custom inline style</td>\n<td>React.CSSProperties</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Entirely disabled</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>dataSource</td>\n<td>Option list</td>\n<td>Array&lt;ValueItem&gt; | Array&lt;CheckboxData&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>Selected value list</td>\n<td>ValueItem[] | ValueItem</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>Default selected value list</td>\n<td>ValueItem[] | ValueItem</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>Name</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>Set internal checkbox through child elements</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Selected value change event</td>\n<td>(value: ValueItem[], e: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>direction</td>\n<td>Arrangement of subitems</td>\n<td>&apos;hoz&apos; | &apos;ver&apos;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>itemDirection</td>\n<td>[Deprecated] Arrangement of subitems</td>\n<td>&apos;hoz&apos; | &apos;ver&apos;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Is preview</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>1.19</td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Custom rendering content<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>previewed</em>: Previewed value [{label: &apos;&apos;, value:&apos;&apos;},...]<br><em>props</em>: All props<br><strong>return</strong>:<br>Custom rendering content</td>\n<td>(<br> previewed: {<br> label: string | React.ReactNode;<br> value: string | React.ReactNode;<br> }[],<br> props: object<br> ) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n<td>1.19</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Value Item\">ValueItem <a class=\"header-anchor scroll-count-item\" href=\"#Value Item\" data-scroll-id=\"Value Item\">#</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\">ValueItem</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<h3 id=\"Checkbox Data\">CheckboxData <a class=\"header-anchor scroll-count-item\" href=\"#Checkbox Data\" data-scroll-id=\"Checkbox Data\">#</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\">CheckboxData</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n    value<span class=\"token operator\">:</span> ValueItem<span class=\"token punctuation\">;</span>\n    label<span class=\"token operator\">?</span><span class=\"token operator\">:</span> React<span class=\"token punctuation\">.</span>ReactNode<span class=\"token punctuation\">;</span>\n    disabled<span class=\"token operator\">?</span><span class=\"token operator\">:</span> <span class=\"token builtin\">boolean</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">[</span>propName<span class=\"token operator\">:</span> <span class=\"token builtin\">string</span><span class=\"token punctuation\">]</span><span class=\"token operator\">:</span> <span class=\"token builtin\">unknown</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</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\">SPACE</td>\n<td style=\"text-align:left\">Select or cancel the current item</td>\n</tr>\n</tbody>\n</table>\n"}