{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<p>Switch Component</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>The Switch Component toggles the state. The options in the switch, as well as its state, should be clearly displayed with the accompanying inline label. Switch acts the same as the radio button, yet we should prefer switch cuz the latter is obsolete.</p>\n<h3 id=\"Note\">Note <a class=\"header-anchor scroll-count-item\" href=\"#Note\" data-scroll-id=\"Note\">#</a></h3>\n<ul>\n<li>We should take into account the font size when using custom checkChildren and unCheckedChildren, cuz the width is limited and defaults to be 2 characters.</li>\n</ul>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Switch\">Switch <a class=\"header-anchor scroll-count-item\" href=\"#Switch\" data-scroll-id=\"Switch\">#</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>defaultChecked</td>\n<td>Is default on&#xFF08;uncontrolled&#xFF09;</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>checked</td>\n<td>Is on&#xFF08;controlled&#xFF09;</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback when state is changed<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>checked</em>: Is on</td>\n<td>(<br> checked: boolean,<br> e: React.MouseEvent&lt;HTMLDivElement&gt; | React.KeyboardEvent&lt;HTMLDivElement&gt;<br> ) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>size</td>\n<td>Size of switch</td>\n<td>&apos;medium&apos; | &apos;small&apos;</td>\n<td>&apos;medium&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>loading</td>\n<td>Is loading</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Is disabled</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>autoWidth</td>\n<td>Width adapts to content</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Is preview mode</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Custom render method when is preview mode.<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>checked</em>: Is on<br><em>props</em>: The props of switch<br><strong>return</strong>:<br>The render content when preview</td>\n<td>(checked: boolean, props: SwitchProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>checkedChildren</td>\n<td>Content of &apos;on&apos; state</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>unCheckedChildren</td>\n<td>Content of &apos;off&apos; state</td>\n<td>React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>-</td>\n<td>(e: React.MouseEvent&lt;HTMLDivElement&gt; | React.KeyboardEvent&lt;HTMLDivElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onKeyDown</td>\n<td>-</td>\n<td>(e: React.KeyboardEvent&lt;HTMLDivElement&gt;) =&gt; void</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"Keyboard Support\">Keyboard Support <a class=\"header-anchor scroll-count-item\" href=\"#Keyboard Support\" data-scroll-id=\"Keyboard Support\">#</a></h2>\n<ul>\n<li>press enter to switch when focused</li>\n</ul>\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\">Enter</td>\n<td style=\"text-align:left\">toggle checked</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Space</td>\n<td style=\"text-align:left\">toggle checked</td>\n</tr>\n</tbody>\n</table>\n"}