From a214b9a7fe69377c6f07067cd76faa3dce85fdf3 Mon Sep 17 00:00:00 2001
From: xiejay97 <xiejay97@gmail.com>
Date: Thu, 6 Jan 2022 18:39:00 +0800
Subject: [PATCH] feat(ui): add `switch` component

---
 packages/site/src/app/configs/icons.json      |  22 +++
 packages/site/src/app/styles/_app.scss        |   2 +
 .../src/components/_select-box/SelectBox.tsx  |   1 +
 packages/ui/src/components/button/Button.tsx  |   6 +-
 .../src/components/button/demos/5.Loading.md  |   2 +-
 .../ui/src/components/checkbox/Checkbox.tsx   |  41 ++---
 .../src/components/checkbox/CheckboxGroup.tsx |  25 +--
 packages/ui/src/components/checkbox/README.md |  11 +-
 .../src/components/checkbox/README.zh-Hant.md |  11 +-
 .../src/components/checkbox/demos/1.Basic.md  |  23 +--
 .../src/components/checkbox/demos/4.Size.md   |  51 ------
 packages/ui/src/components/form/FormItem.tsx  |  21 ++-
 .../form/demos/13.SupportComponents.md        |   7 +-
 packages/ui/src/components/index.ts           |   3 +
 packages/ui/src/components/radio/README.md    |   8 +-
 .../ui/src/components/radio/README.zh-Hant.md |   8 +-
 packages/ui/src/components/radio/Radio.tsx    |  44 ++---
 .../ui/src/components/radio/RadioGroup.tsx    |  12 +-
 .../ui/src/components/radio/demos/1.Basic.md  |  21 +--
 .../ui/src/components/radio/demos/4.Size.md   |  24 ---
 packages/ui/src/components/select/Select.tsx  |  13 +-
 packages/ui/src/components/switch/README.md   |  29 ++++
 .../src/components/switch/README.zh-Hant.md   |  28 +++
 packages/ui/src/components/switch/Switch.tsx  | 163 ++++++++++++++++++
 .../ui/src/components/switch/demos/1.Basic.md |  35 ++++
 .../switch/demos/2.LabelPlacement.md          |  21 +++
 .../src/components/switch/demos/3.Content.md  |  27 +++
 .../src/components/switch/demos/4.Loading.md  |  28 +++
 packages/ui/src/components/switch/index.ts    |   1 +
 packages/ui/src/hooks/two-way-binding.ts      |   2 +-
 packages/ui/src/styles/_components.scss       |   1 +
 .../ui/src/styles/components/_button.scss     |  22 +--
 .../ui/src/styles/components/_checkbox.scss   |  10 --
 .../ui/src/styles/components/_compose.scss    |   1 +
 .../ui/src/styles/components/_dialog.scss     |   2 -
 .../ui/src/styles/components/_drawer.scss     |   1 -
 packages/ui/src/styles/components/_form.scss  |   9 +-
 .../src/styles/components/_notification.scss  |   1 -
 packages/ui/src/styles/components/_radio.scss |  12 +-
 .../ui/src/styles/components/_select-box.scss |   1 -
 .../ui/src/styles/components/_switch.scss     | 130 ++++++++++++++
 packages/ui/src/styles/components/_tabs.scss  |   2 +
 packages/ui/src/styles/components/_tag.scss   |  11 +-
 .../ui/src/styles/components/_textarea.scss   |   2 -
 packages/ui/src/styles/components/_toast.scss |   1 -
 45 files changed, 623 insertions(+), 273 deletions(-)
 delete mode 100644 packages/ui/src/components/checkbox/demos/4.Size.md
 create mode 100644 packages/ui/src/components/switch/README.md
 create mode 100644 packages/ui/src/components/switch/README.zh-Hant.md
 create mode 100644 packages/ui/src/components/switch/Switch.tsx
 create mode 100644 packages/ui/src/components/switch/demos/1.Basic.md
 create mode 100644 packages/ui/src/components/switch/demos/2.LabelPlacement.md
 create mode 100644 packages/ui/src/components/switch/demos/3.Content.md
 create mode 100644 packages/ui/src/components/switch/demos/4.Loading.md
 create mode 100644 packages/ui/src/components/switch/index.ts
 create mode 100644 packages/ui/src/styles/components/_switch.scss

diff --git a/packages/site/src/app/configs/icons.json b/packages/site/src/app/configs/icons.json
index eb395dda..c5517e10 100644
--- a/packages/site/src/app/configs/icons.json
+++ b/packages/site/src/app/configs/icons.json
@@ -132,5 +132,27 @@
         ]
       }
     ]
+  },
+  {
+    "name": "check",
+    "list": [
+      {
+        "viewBox": "64 64 896 896",
+        "paths": [
+          "M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 00-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z"
+        ]
+      }
+    ]
+  },
+  {
+    "name": "close",
+    "list": [
+      {
+        "viewBox": "64 64 896 896",
+        "paths": [
+          "M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+        ]
+      }
+    ]
   }
 ]
diff --git a/packages/site/src/app/styles/_app.scss b/packages/site/src/app/styles/_app.scss
index c8e83ca8..fed44f28 100644
--- a/packages/site/src/app/styles/_app.scss
+++ b/packages/site/src/app/styles/_app.scss
@@ -141,6 +141,8 @@ h3 {
     border-collapse: collapse;
     border-spacing: 0;
 
+    word-break: break-all;
+
     table-layout: fixed;
 
     empty-cells: show;
diff --git a/packages/ui/src/components/_select-box/SelectBox.tsx b/packages/ui/src/components/_select-box/SelectBox.tsx
index 59bd151f..5cb54952 100644
--- a/packages/ui/src/components/_select-box/SelectBox.tsx
+++ b/packages/ui/src/components/_select-box/SelectBox.tsx
@@ -123,6 +123,7 @@ const SelectBox: React.ForwardRefRenderFunction<HTMLDivElement, DSelectBoxProps>
         'is-expanded': dExpanded,
         'is-disabled': disabled,
       })}
+      role="button"
       tabIndex={disabled ? undefined : tabIndex}
       aria-disabled={disabled}
       aria-haspopup="listbox"
diff --git a/packages/ui/src/components/button/Button.tsx b/packages/ui/src/components/button/Button.tsx
index b0e585c2..6d39375a 100644
--- a/packages/ui/src/components/button/Button.tsx
+++ b/packages/ui/src/components/button/Button.tsx
@@ -60,17 +60,17 @@ const Button: React.ForwardRefRenderFunction<DButtonRef, DButtonProps> = (props,
   const buttonType = isUndefined(props.dType) ? buttonGroupType ?? dType : dType;
   const theme = isUndefined(props.dTheme) ? buttonGroupTheme ?? dTheme : dTheme;
   const size = dSize ?? gSize;
-  const _disabled = disabled || buttonGroupDisabled || gDisabled;
+  const _disabled = disabled || dLoading || buttonGroupDisabled || gDisabled;
 
   const handleClick = useCallback(
     (e) => {
       onClick?.(e);
 
-      if (!dLoading && (buttonType === 'primary' || buttonType === 'secondary' || buttonType === 'outline' || buttonType === 'dashed')) {
+      if (buttonType === 'primary' || buttonType === 'secondary' || buttonType === 'outline' || buttonType === 'dashed') {
         wave(e.currentTarget, `var(--${dPrefix}color-${theme})`);
       }
     },
-    [theme, dLoading, dPrefix, onClick, buttonType, wave]
+    [theme, dPrefix, onClick, buttonType, wave]
   );
 
   const buttonIcon = (loading: boolean, ref?: React.LegacyRef<HTMLSpanElement>) => (
diff --git a/packages/ui/src/components/button/demos/5.Loading.md b/packages/ui/src/components/button/demos/5.Loading.md
index c2979c71..5b80748a 100644
--- a/packages/ui/src/components/button/demos/5.Loading.md
+++ b/packages/ui/src/components/button/demos/5.Loading.md
@@ -1,7 +1,7 @@
 ---
 title:
   en-US: Loading
-  zh-Hant: 加载中状态
+  zh-Hant: 加载中
 ---
 
 # en-US
diff --git a/packages/ui/src/components/checkbox/Checkbox.tsx b/packages/ui/src/components/checkbox/Checkbox.tsx
index 34842071..bdcaa498 100644
--- a/packages/ui/src/components/checkbox/Checkbox.tsx
+++ b/packages/ui/src/components/checkbox/Checkbox.tsx
@@ -6,31 +6,28 @@ import { usePrefixConfig, useComponentConfig, useCustomContext, useTwoWayBinding
 import { getClassName } from '../../utils';
 import { DCheckboxGroupContext } from './CheckboxGroup';
 
-export type DCheckboxRef = HTMLInputElement;
-
 export interface DCheckboxProps extends React.HTMLAttributes<HTMLElement> {
   dModel?: [boolean, Updater<boolean>?];
   dFormControlName?: string;
   dIndeterminate?: boolean;
-  dAriaControls?: string;
-  dSize?: 'smaller' | 'larger';
   dDisabled?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   dValue?: any;
+  dInputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  dInputRef?: React.LegacyRef<HTMLInputElement>;
   onModelChange?: (checked: boolean) => void;
 }
 
-const Checkbox: React.ForwardRefRenderFunction<DCheckboxRef, DCheckboxProps> = (props, ref) => {
+export function DCheckbox(props: DCheckboxProps) {
   const {
     dModel,
     dFormControlName,
     dIndeterminate = false,
-    dAriaControls,
-    dSize,
     dDisabled = false,
     dValue,
+    dInputProps,
+    dInputRef,
     onModelChange,
-    id,
     className,
     children,
     onChange,
@@ -39,47 +36,43 @@ const Checkbox: React.ForwardRefRenderFunction<DCheckboxRef, DCheckboxProps> = (
 
   //#region Context
   const dPrefix = usePrefixConfig();
-  const { gSize, gDisabled } = useGeneralState();
+  const { gDisabled } = useGeneralState();
   const [{ updateCheckboxs, removeCheckboxs, checkboxGroupValue, onCheckedChange }, checkboxGroupContext] =
     useCustomContext(DCheckboxGroupContext);
   //#endregion
 
   const uniqueId = useId();
-  const _id = id ?? `${dPrefix}checkbox-${uniqueId}`;
+  const _id = dInputProps?.id ?? `${dPrefix}checkbox-input-${uniqueId}`;
 
   useStateBackflow(updateCheckboxs, removeCheckboxs, _id, dValue);
 
   const inGroup = checkboxGroupContext !== null;
 
-  const [checked, changeChecked, { validateClassName, ariaAttribute, controlDisabled }] = useTwoWayBinding<boolean | undefined, boolean>(
+  const [checked, changeChecked, { ariaAttribute, controlDisabled }] = useTwoWayBinding<boolean | undefined, boolean>(
     false,
     dModel ?? (dIndeterminate ? [undefined] : inGroup ? [checkboxGroupValue?.includes(dValue) ?? false] : undefined),
     onModelChange,
     dFormControlName ? { formControlName: dFormControlName, id: _id } : undefined
   );
 
-  const size = dSize ?? gSize;
   const disabled = dDisabled || gDisabled || controlDisabled;
 
   const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
     (e) => {
       onChange?.(e);
 
-      if (!disabled) {
-        changeChecked(dIndeterminate ? true : !checked);
-        if (inGroup) {
-          onCheckedChange?.(dValue, dIndeterminate ? true : !checked);
-        }
+      changeChecked(dIndeterminate ? true : !checked);
+      if (inGroup) {
+        onCheckedChange?.(dValue, dIndeterminate ? true : !checked);
       }
     },
-    [onChange, disabled, changeChecked, dIndeterminate, checked, inGroup, onCheckedChange, dValue]
+    [onChange, changeChecked, dIndeterminate, checked, inGroup, onCheckedChange, dValue]
   );
 
   return (
     <div
       {...restProps}
       className={getClassName(className, `${dPrefix}checkbox`, {
-        [`${dPrefix}checkbox--${size}`]: size,
         'is-indeterminate': dIndeterminate,
         'is-checked': !dIndeterminate && checked,
         'is-disabled': disabled,
@@ -87,15 +80,15 @@ const Checkbox: React.ForwardRefRenderFunction<DCheckboxRef, DCheckboxProps> = (
     >
       <div className={`${dPrefix}checkbox__input-wrapper`}>
         <input
+          {...dInputProps}
           {...ariaAttribute}
-          ref={ref}
+          ref={dInputRef}
           id={_id}
-          className={getClassName(`${dPrefix}checkbox__input`, validateClassName)}
+          className={getClassName(dInputProps?.className, `${dPrefix}checkbox__input`)}
           type="checkbox"
           disabled={disabled}
           aria-labelledby={`${dPrefix}checkbox-label-${uniqueId}`}
           aria-checked={dIndeterminate ? 'mixed' : checked}
-          aria-controls={dAriaControls}
           onChange={handleChange}
         />
         {!dIndeterminate && checked && <div className={`${dPrefix}checkbox__tick`}></div>}
@@ -106,6 +99,4 @@ const Checkbox: React.ForwardRefRenderFunction<DCheckboxRef, DCheckboxProps> = (
       </label>
     </div>
   );
-};
-
-export const DCheckbox = React.forwardRef(Checkbox);
+}
diff --git a/packages/ui/src/components/checkbox/CheckboxGroup.tsx b/packages/ui/src/components/checkbox/CheckboxGroup.tsx
index cdc777f2..d0fe28be 100644
--- a/packages/ui/src/components/checkbox/CheckboxGroup.tsx
+++ b/packages/ui/src/components/checkbox/CheckboxGroup.tsx
@@ -2,7 +2,7 @@
 import type { DGeneralStateContextData } from '../../hooks/general-state';
 import type { Updater } from '../../hooks/two-way-binding';
 
-import React, { useCallback, useId, useLayoutEffect, useMemo } from 'react';
+import React, { useCallback, useLayoutEffect, useMemo } from 'react';
 
 import { usePrefixConfig, useComponentConfig, useTwoWayBinding, useGeneralState, DGeneralStateContext, useImmer } from '../../hooks';
 import { getClassName } from '../../utils';
@@ -19,7 +19,6 @@ export const DCheckboxGroupContext = React.createContext<DCheckboxGroupContextDa
 export interface DCheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
   dModel?: [any[], Updater<any[]>?];
   dFormControlName?: string;
-  dSize?: 'smaller' | 'larger';
   dDisabled?: boolean;
   dVertical?: boolean;
   dIndeterminateLabel?: (checked: boolean | 'mixed') => React.ReactNode;
@@ -31,13 +30,11 @@ export function DCheckboxGroup(props: DCheckboxGroupProps) {
   const {
     dModel,
     dFormControlName,
-    dSize,
     dDisabled = false,
     dVertical = false,
     dIndeterminateLabel,
     dIndeterminateRef,
     onModelChange,
-    id,
     className,
     children,
     ...restProps
@@ -45,22 +42,18 @@ export function DCheckboxGroup(props: DCheckboxGroupProps) {
 
   //#region Context
   const dPrefix = usePrefixConfig();
-  const { gSize, gDisabled } = useGeneralState();
+  const { gDisabled } = useGeneralState();
   //#endregion
 
-  const uniqueId = useId();
-  const _id = id ?? `${dPrefix}checkbox-group-${uniqueId}`;
-
   const [checkboxs, setCheckboxs] = useImmer(new Map<string, { id: string; value: any }>());
 
   const [value, changeValue, { ariaAttribute, controlDisabled }] = useTwoWayBinding(
     [],
     dModel,
     onModelChange,
-    dFormControlName ? { formControlName: dFormControlName, id: _id } : undefined
+    dFormControlName ? { formControlName: dFormControlName } : undefined
   );
 
-  const size = dSize ?? gSize;
   const disabled = dDisabled || gDisabled || controlDisabled;
 
   const allLength = React.Children.count(children);
@@ -72,9 +65,11 @@ export function DCheckboxGroup(props: DCheckboxGroupProps) {
         <DCheckbox
           dModel={checked !== 'mixed' ? [checked] : undefined}
           dIndeterminate={checked === 'mixed'}
-          dAriaControls={Array.from(checkboxs.values())
-            .map((item) => item.id)
-            .join(' ')}
+          dInputProps={{
+            'aria-controls': Array.from(checkboxs.values())
+              .map((item) => item.id)
+              .join(' '),
+          }}
           onModelChange={() => {
             checked === true ? changeValue([]) : changeValue(Array.from(checkboxs.values()).map((item) => item.value));
           }}
@@ -92,10 +87,9 @@ export function DCheckboxGroup(props: DCheckboxGroupProps) {
 
   const generalStateContextValue = useMemo<DGeneralStateContextData>(
     () => ({
-      gSize: size,
       gDisabled: disabled,
     }),
-    [disabled, size]
+    [disabled]
   );
 
   const stateBackflow = useMemo<Pick<DCheckboxGroupContextData, 'updateCheckboxs' | 'removeCheckboxs'>>(
@@ -139,7 +133,6 @@ export function DCheckboxGroup(props: DCheckboxGroupProps) {
         <div
           {...restProps}
           {...ariaAttribute}
-          id={_id}
           className={getClassName(className, `${dPrefix}checkbox-group`, {
             [`${dPrefix}checkbox-group--vertical`]: dVertical,
           })}
diff --git a/packages/ui/src/components/checkbox/README.md b/packages/ui/src/components/checkbox/README.md
index fc6f9a50..ac1fd259 100644
--- a/packages/ui/src/components/checkbox/README.md
+++ b/packages/ui/src/components/checkbox/README.md
@@ -20,19 +20,13 @@ Extend `React.HTMLAttributes<HTMLElement>`.
 | --- | --- | --- | --- | 
 | dModel | Manual control is checked | [boolean, Updater\<boolean\>?] | - |
 | dIndeterminate | Is it partially checked | boolean | false |
-| dAriaControls | [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | string | - |
-| dSize | Set size | 'smaller' \| 'larger' | - |
 | dDisabled | Whether to disable | boolean | false |
 | dValue | Pass as an identifier in checkbox group | any  | - |
+| dInputProps | Attributes applied to the `input` element | React.InputHTMLAttributes\<HTMLInputElement\>  | - |
+| dInputRef | Pass a `ref` to the `input` element | React.LegacyRef\<HTMLInputElement\>  | - |
 | onModelChange | Selected change callback | `(checked: boolean) => void` | - |
 <!-- prettier-ignore-end -->
 
-### DCheckboxRef
-
-```tsx
-type DCheckboxRef = HTMLInputElement;
-```
-
 ### DCheckboxGroupProps
 
 Extend `React.HTMLAttributes<HTMLDivElement>`.
@@ -41,7 +35,6 @@ Extend `React.HTMLAttributes<HTMLDivElement>`.
 | Property | Description | Type | Default | 
 | --- | --- | --- | --- | 
 | dModel | Manual control selection | [any[], Updater\<any[]\>?] | - |
-| dSize | Checkbox group size | 'smaller' \| 'larger' | - |
 | dDisabled | Whether to disable | boolean | false |
 | dVertical | Vertical arrangement of checkbox group | boolean | false |
 | dIndeterminateLabel | Partially checked label content | `(checked: boolean \| 'mixed') => React.ReactNode` | - |
diff --git a/packages/ui/src/components/checkbox/README.zh-Hant.md b/packages/ui/src/components/checkbox/README.zh-Hant.md
index b0f82da5..95c32143 100644
--- a/packages/ui/src/components/checkbox/README.zh-Hant.md
+++ b/packages/ui/src/components/checkbox/README.zh-Hant.md
@@ -19,19 +19,13 @@ title: 多选组
 | --- | --- | --- | --- | 
 | dModel | 手动控制是否选中 | [boolean, Updater\<boolean\>?] | - |
 | dIndeterminate | 是否为部分选中 | boolean | false |
-| dAriaControls | [aria-controls](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-controls) | string | - |
-| dSize | 设置尺寸 | 'smaller' \| 'larger' | - |
 | dDisabled | 是否禁用 | boolean | false |
 | dValue | 多选组中作为标识传递 | any  | - |
+| dInputProps | 应用于 `input` 元素的属性 | React.InputHTMLAttributes\<HTMLInputElement\>  | - |
+| dInputRef | 将 `ref` 传递给 `input` 元素 | React.LegacyRef\<HTMLInputElement\>  | - |
 | onModelChange | 选中改变的回调 | `(checked: boolean) => void` | - |
 <!-- prettier-ignore-end -->
 
-### DCheckboxRef
-
-```tsx
-type DCheckboxRef = HTMLInputElement;
-```
-
 ### DCheckboxGroupProps
 
 继承 `React.HTMLAttributes<HTMLDivElement>`。
@@ -40,7 +34,6 @@ type DCheckboxRef = HTMLInputElement;
 | 参数 | 说明 | 类型 | 默认值 | 
 | --- | --- | --- | --- | 
 | dModel | 手动控制选择 | [any[], Updater\<any[]\>?] | - |
-| dSize | 多选组尺寸 | 'smaller' \| 'larger' | - |
 | dDisabled | 是否禁用 | boolean | false |
 | dVertical | 多选组垂直排布 | boolean | false |
 | dIndeterminateLabel | 部分选中的标签内容 | `(checked: boolean \| 'mixed') => React.ReactNode` | - |
diff --git a/packages/ui/src/components/checkbox/demos/1.Basic.md b/packages/ui/src/components/checkbox/demos/1.Basic.md
index 531f64d2..d35a5f8c 100644
--- a/packages/ui/src/components/checkbox/demos/1.Basic.md
+++ b/packages/ui/src/components/checkbox/demos/1.Basic.md
@@ -17,21 +17,14 @@ import { DCheckbox } from '@react-devui/ui';
 
 export default function Demo() {
   return (
-    <>
-      <div className="app-demo-flex-container">
-        <DCheckbox dSize="smaller">Checkbox</DCheckbox>
-        <DCheckbox>Checkbox</DCheckbox>
-        <DCheckbox dSize="larger">Checkbox</DCheckbox>
-      </div>
-      <br />
-      <div className="app-demo-flex-container">
-        <DCheckbox dIndeterminate>Checkbox</DCheckbox>
-        <DCheckbox dDisabled>Checkbox Disabled</DCheckbox>
-        <DCheckbox dModel={[true]} dDisabled>
-          Checkbox Disabled
-        </DCheckbox>
-      </div>
-    </>
+    <div className="app-demo-flex-container">
+      <DCheckbox>Checkbox</DCheckbox>
+      <DCheckbox dIndeterminate>Checkbox</DCheckbox>
+      <DCheckbox dDisabled>Checkbox Disabled</DCheckbox>
+      <DCheckbox dModel={[true]} dDisabled>
+        Checkbox Disabled
+      </DCheckbox>
+    </div>
   );
 }
 ```
diff --git a/packages/ui/src/components/checkbox/demos/4.Size.md b/packages/ui/src/components/checkbox/demos/4.Size.md
deleted file mode 100644
index a5193b73..00000000
--- a/packages/ui/src/components/checkbox/demos/4.Size.md
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title:
-  en-US: Size
-  zh-Hant: 尺寸
----
-
-# en-US
-
-Adjust size by setting `dSize` to `larger` and `smaller`.
-
-# zh-Hant
-
-通过设置 `dSize` 为 `larger` `smaller` 调整尺寸。
-
-```tsx
-import { useState } from 'react';
-
-import { DCheckbox, DCheckboxGroup } from '@react-devui/ui';
-
-export default function Demo() {
-  const [value, setValue] = useState([2]);
-
-  return (
-    <>
-      <DCheckboxGroup dModel={[value, setValue]} dSize="smaller">
-        {[1, 2, 3].map((n) => (
-          <DCheckbox key={n} dValue={n}>
-            Radio {n}
-          </DCheckbox>
-        ))}
-      </DCheckboxGroup>
-      <br />
-      <DCheckboxGroup dModel={[value, setValue]}>
-        {[1, 2, 3].map((n) => (
-          <DCheckbox key={n} dValue={n}>
-            Radio {n}
-          </DCheckbox>
-        ))}
-      </DCheckboxGroup>
-      <br />
-      <DCheckboxGroup dModel={[value, setValue]} dSize="larger">
-        {[1, 2, 3].map((n) => (
-          <DCheckbox key={n} dValue={n}>
-            Radio {n}
-          </DCheckbox>
-        ))}
-      </DCheckboxGroup>
-    </>
-  );
-}
-```
diff --git a/packages/ui/src/components/form/FormItem.tsx b/packages/ui/src/components/form/FormItem.tsx
index 9330ba05..fa8a3c39 100644
--- a/packages/ui/src/components/form/FormItem.tsx
+++ b/packages/ui/src/components/form/FormItem.tsx
@@ -89,7 +89,7 @@ export function DFormItem(props: DFormItemProps) {
     return _props;
   })();
 
-  const [formItems, setFormItems] = useImmer(new Map<string, { formControlName: string; id: string }>());
+  const [formItems, setFormItems] = useImmer(new Map<string, { formControlName: string; id?: string }>());
 
   const getControl = useCallback(
     (formControlName: string) => {
@@ -278,10 +278,22 @@ export function DFormItem(props: DFormItemProps) {
     }
   }, [dLabelExtra]);
 
+  const handleLabelClick = useCallback<React.MouseEventHandler<HTMLLabelElement>>((e) => {
+    const id = e.currentTarget.getAttribute('for');
+    if (id) {
+      const el = document.getElementById(id);
+      if (el && el.tagName !== 'INPUT') {
+        e.preventDefault();
+        el.focus({ preventScroll: true });
+        el.click();
+      }
+    }
+  }, []);
+
   const stateBackflow = useMemo<Pick<DFormItemContextData, 'updateFormItems' | 'removeFormItems'>>(
     () => ({
       updateFormItems: (identity, formControlName, id) => {
-        if (isString(formControlName) && isString(id)) {
+        if (isString(formControlName)) {
           setFormItems((draft) => {
             draft.set(identity, { formControlName, id });
           });
@@ -321,7 +333,8 @@ export function DFormItem(props: DFormItemProps) {
           }
         )}
         style={{
-          flex: span === true ? '1 0 auto' : `0 0 ${isNumber(span) ? `calc((100% / 12) * ${span})` : span}`,
+          flexGrow: span === true ? 1 : undefined,
+          width: span === true ? undefined : isNumber(span) ? `calc((100% / 12) * ${span})` : span,
         }}
       >
         <div className={`${dPrefix}form-item__container`}>
@@ -334,7 +347,7 @@ export function DFormItem(props: DFormItemProps) {
                 })}
                 style={{ width: formLayout === 'vertical' ? undefined : labelWidth }}
               >
-                <label htmlFor={id}>
+                <label htmlFor={id} onClick={handleLabelClick}>
                   {dLabel}
                   {(extraNode || formCustomLabel === 'optional') && (
                     <div className={`${dPrefix}form-item__extra`}>
diff --git a/packages/ui/src/components/form/demos/13.SupportComponents.md b/packages/ui/src/components/form/demos/13.SupportComponents.md
index 7b778870..a12b781f 100644
--- a/packages/ui/src/components/form/demos/13.SupportComponents.md
+++ b/packages/ui/src/components/form/demos/13.SupportComponents.md
@@ -30,6 +30,7 @@ import {
   DTextarea,
   DCheckbox,
   DCheckboxGroup,
+  DSwitch,
 } from '@react-devui/ui';
 
 export default function Demo() {
@@ -50,6 +51,7 @@ export default function Demo() {
         Select: new FormControl(50, () => ({ error: true })),
         MultipleSelect: new FormControl([30, 50, 70], () => ({ error: true })),
         Textarea: new FormControl('', () => ({ error: true })),
+        Switch: new FormControl(false),
       })
   );
 
@@ -88,7 +90,7 @@ export default function Demo() {
       <DFormItem dLabel="Radio" dErrors="Errors!">
         <DRadio dFormControlName="Radio">Radio</DRadio>
       </DFormItem>
-      <DFormItem dLabel="RadioGroup " dErrors="Errors!">
+      <DFormItem dLabel="RadioGroup" dErrors="Errors!">
         <DRadioGroup dFormControlName="RadioGroup">
           {[1, 2, 3].map((n) => (
             <DRadio key={n} dValue={n} dDisabled={n === 2}>
@@ -97,6 +99,9 @@ export default function Demo() {
           ))}
         </DRadioGroup>
       </DFormItem>
+      <DFormItem dLabel="Switch" dErrors="Errors!">
+        <DSwitch dFormControlName="Switch"></DSwitch>
+      </DFormItem>
       <DFormItem dLabel="Select" dErrors="Errors!">
         <DSelect dFormControlName="Select" dOptions={options}></DSelect>
       </DFormItem>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 5c8549e6..7d0af464 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -58,6 +58,9 @@ export { DSelect } from './select';
 export type { DSeparatorProps } from './separator';
 export { DSeparator } from './separator';
 
+export type { DSwitchProps } from './switch';
+export { DSwitch } from './switch';
+
 export type { DTabProps, DTabsProps } from './tabs';
 export { DTab, DTabs } from './tabs';
 
diff --git a/packages/ui/src/components/radio/README.md b/packages/ui/src/components/radio/README.md
index f6acca02..c4a16097 100644
--- a/packages/ui/src/components/radio/README.md
+++ b/packages/ui/src/components/radio/README.md
@@ -21,15 +21,11 @@ Extend `React.HTMLAttributes<HTMLElement>`.
 | dModel | Manual control is selected | [boolean, Updater\<boolean\>?] | - |
 | dDisabled | Whether to disable | boolean | false |
 | dValue | Pass as an identifier in radio group | any  | - |
+| dInputProps | Attributes applied to the `input` element | React.InputHTMLAttributes\<HTMLInputElement\>  | - |
+| dInputRef | Pass a `ref` to the `input` element | React.LegacyRef\<HTMLInputElement\>  | - |
 | onModelChange | Selected change callback | `(checked: boolean) => void` | - |
 <!-- prettier-ignore-end -->
 
-### DRadioRef
-
-```tsx
-type DRadioRef = HTMLInputElement;
-```
-
 ### DRadioGroupProps
 
 Extend `React.HTMLAttributes<HTMLDivElement>`.
diff --git a/packages/ui/src/components/radio/README.zh-Hant.md b/packages/ui/src/components/radio/README.zh-Hant.md
index 3ec10cde..fe8b9d47 100644
--- a/packages/ui/src/components/radio/README.zh-Hant.md
+++ b/packages/ui/src/components/radio/README.zh-Hant.md
@@ -20,15 +20,11 @@ title: 单选组
 | dModel | 手动控制是否选中 | [boolean, Updater\<boolean\>?] | - |
 | dDisabled | 是否禁用 | boolean | false |
 | dValue | 单选组中作为标识传递 | any  | - |
+| dInputProps | 应用于 `input` 元素的属性 | React.InputHTMLAttributes\<HTMLInputElement\>  | - |
+| dInputRef | 将 `ref` 传递给 `input` 元素 | React.LegacyRef\<HTMLInputElement\>  | - |
 | onModelChange | 选中改变的回调 | `(checked: boolean) => void` | - |
 <!-- prettier-ignore-end -->
 
-### DRadioRef
-
-```tsx
-type DRadioRef = HTMLInputElement;
-```
-
 ### DRadioGroupProps
 
 继承 `React.HTMLAttributes<HTMLDivElement>`。
diff --git a/packages/ui/src/components/radio/Radio.tsx b/packages/ui/src/components/radio/Radio.tsx
index 55d32e78..a3a78ab9 100644
--- a/packages/ui/src/components/radio/Radio.tsx
+++ b/packages/ui/src/components/radio/Radio.tsx
@@ -14,27 +14,26 @@ import {
 import { getClassName } from '../../utils';
 import { DRadioGroupContext } from './RadioGroup';
 
-export type DRadioRef = HTMLInputElement;
-
 export interface DRadioProps extends React.HTMLAttributes<HTMLElement> {
   dModel?: [boolean, Updater<boolean>?];
   dFormControlName?: string;
-  dSize?: 'smaller' | 'larger';
   dDisabled?: boolean;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   dValue?: any;
+  dInputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  dInputRef?: React.LegacyRef<HTMLInputElement>;
   onModelChange?: (checked: boolean) => void;
 }
 
-const Radio: React.ForwardRefRenderFunction<DRadioRef, DRadioProps> = (props, ref) => {
+export function DRadio(props: DRadioProps) {
   const {
     dModel,
     dFormControlName,
-    dSize,
     dDisabled = false,
     dValue,
+    dInputProps,
+    dInputRef,
     onModelChange,
-    id,
     className,
     children,
     onChange,
@@ -43,7 +42,7 @@ const Radio: React.ForwardRefRenderFunction<DRadioRef, DRadioProps> = (props, re
 
   //#region Context
   const dPrefix = usePrefixConfig();
-  const { gSize, gDisabled } = useGeneralState();
+  const { gDisabled } = useGeneralState();
   const [{ radioGroupValue, radioGroupName, radioGroupType, onCheckedChange }, radioGroupContext] = useCustomContext(DRadioGroupContext);
   //#endregion
 
@@ -54,35 +53,32 @@ const Radio: React.ForwardRefRenderFunction<DRadioRef, DRadioProps> = (props, re
   const wave = useWave();
 
   const uniqueId = useId();
-  const _id = id ?? `${dPrefix}radio-${uniqueId}`;
+  const _id = dInputProps?.id ?? `${dPrefix}radio-input-${uniqueId}`;
 
   const inGroup = radioGroupContext !== null;
 
-  const [checked, changeChecked, { validateClassName, ariaAttribute, controlDisabled }] = useTwoWayBinding(
+  const [checked, changeChecked, { ariaAttribute, controlDisabled }] = useTwoWayBinding(
     false,
     dModel ?? (inGroup ? [radioGroupValue === dValue] : undefined),
     onModelChange,
     dFormControlName ? { formControlName: dFormControlName, id: _id } : undefined
   );
 
-  const size = dSize ?? gSize;
   const disabled = dDisabled || gDisabled || controlDisabled;
 
   const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
     (e) => {
       onChange?.(e);
 
-      if (!disabled) {
-        changeChecked(true);
-        if (inGroup) {
-          onCheckedChange?.(dValue);
-        }
-        if (radioEl && (radioGroupType === 'fill' || radioGroupType === 'outline')) {
-          wave(radioEl, `var(--${dPrefix}color-primary)`);
-        }
+      changeChecked(true);
+      if (inGroup) {
+        onCheckedChange?.(dValue);
+      }
+      if (radioEl && (radioGroupType === 'fill' || radioGroupType === 'outline')) {
+        wave(radioEl, `var(--${dPrefix}color-primary)`);
       }
     },
-    [onChange, disabled, inGroup, radioEl, radioGroupType, onCheckedChange, dValue, changeChecked, wave, dPrefix]
+    [onChange, inGroup, radioEl, radioGroupType, onCheckedChange, dValue, changeChecked, wave, dPrefix]
   );
 
   return (
@@ -90,17 +86,17 @@ const Radio: React.ForwardRefRenderFunction<DRadioRef, DRadioProps> = (props, re
       {...restProps}
       ref={radioRef}
       className={getClassName(className, `${dPrefix}radio`, {
-        [`${dPrefix}radio--${size}`]: size,
         'is-checked': checked,
         'is-disabled': disabled,
       })}
     >
       <div className={`${dPrefix}radio__input-wrapper`}>
         <input
+          {...dInputProps}
           {...ariaAttribute}
-          ref={ref}
+          ref={dInputRef}
           id={_id}
-          className={getClassName(`${dPrefix}radio__input`, validateClassName)}
+          className={getClassName(dInputProps?.className, `${dPrefix}radio__input`)}
           type="radio"
           name={radioGroupName}
           checked={checked}
@@ -115,6 +111,4 @@ const Radio: React.ForwardRefRenderFunction<DRadioRef, DRadioProps> = (props, re
       </label>
     </div>
   );
-};
-
-export const DRadio = React.forwardRef(Radio);
+}
diff --git a/packages/ui/src/components/radio/RadioGroup.tsx b/packages/ui/src/components/radio/RadioGroup.tsx
index 1c83df8b..8c371f4e 100644
--- a/packages/ui/src/components/radio/RadioGroup.tsx
+++ b/packages/ui/src/components/radio/RadioGroup.tsx
@@ -2,7 +2,7 @@
 import type { DGeneralStateContextData } from '../../hooks/general-state';
 import type { Updater } from '../../hooks/two-way-binding';
 
-import React, { useId, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { usePrefixConfig, useComponentConfig, useTwoWayBinding, useGeneralState, DGeneralStateContext } from '../../hooks';
 import { getClassName } from '../../utils';
@@ -36,7 +36,6 @@ export function DRadioGroup(props: DRadioGroupProps) {
     dSize,
     dVertical = false,
     onModelChange,
-    id,
     className,
     children,
     ...restProps
@@ -47,14 +46,11 @@ export function DRadioGroup(props: DRadioGroupProps) {
   const { gSize, gDisabled } = useGeneralState();
   //#endregion
 
-  const uniqueId = useId();
-  const _id = id ?? `${dPrefix}radio-group-${uniqueId}`;
-
   const [value, changeValue, { ariaAttribute, controlDisabled }] = useTwoWayBinding(
     undefined,
     dModel,
     onModelChange,
-    dFormControlName ? { formControlName: dFormControlName, id: _id } : undefined
+    dFormControlName ? { formControlName: dFormControlName } : undefined
   );
 
   const size = dSize ?? gSize;
@@ -62,10 +58,9 @@ export function DRadioGroup(props: DRadioGroupProps) {
 
   const generalStateContextValue = useMemo<DGeneralStateContextData>(
     () => ({
-      gSize: size,
       gDisabled: disabled,
     }),
-    [disabled, size]
+    [disabled]
   );
 
   const contextValue = useMemo<DRadioGroupContextData>(
@@ -86,7 +81,6 @@ export function DRadioGroup(props: DRadioGroupProps) {
         <div
           {...restProps}
           {...ariaAttribute}
-          id={_id}
           className={getClassName(className, `${dPrefix}radio-group`, {
             [`${dPrefix}radio-group--${dType}`]: dType,
             [`${dPrefix}radio-group--${size}`]: size,
diff --git a/packages/ui/src/components/radio/demos/1.Basic.md b/packages/ui/src/components/radio/demos/1.Basic.md
index 7cb76a18..dfda72ad 100644
--- a/packages/ui/src/components/radio/demos/1.Basic.md
+++ b/packages/ui/src/components/radio/demos/1.Basic.md
@@ -17,20 +17,13 @@ import { DRadio } from '@react-devui/ui';
 
 export default function Demo() {
   return (
-    <>
-      <div className="app-demo-flex-container">
-        <DRadio dSize="smaller">Radio</DRadio>
-        <DRadio>Radio</DRadio>
-        <DRadio dSize="larger">Radio</DRadio>
-      </div>
-      <br />
-      <div className="app-demo-flex-container">
-        <DRadio dDisabled>Radio Disabled</DRadio>
-        <DRadio dModel={[true]} dDisabled>
-          Radio Disabled
-        </DRadio>
-      </div>
-    </>
+    <div className="app-demo-flex-container">
+      <DRadio>Radio</DRadio>
+      <DRadio dDisabled>Radio Disabled</DRadio>
+      <DRadio dModel={[true]} dDisabled>
+        Radio Disabled
+      </DRadio>
+    </div>
   );
 }
 ```
diff --git a/packages/ui/src/components/radio/demos/4.Size.md b/packages/ui/src/components/radio/demos/4.Size.md
index 5fede8d2..e327d41b 100644
--- a/packages/ui/src/components/radio/demos/4.Size.md
+++ b/packages/ui/src/components/radio/demos/4.Size.md
@@ -22,30 +22,6 @@ export default function Demo() {
 
   return (
     <>
-      <DRadioGroup dModel={[value, setValue]} dSize="smaller">
-        {[1, 2, 3].map((n) => (
-          <DRadio key={n} dValue={n}>
-            Radio {n}
-          </DRadio>
-        ))}
-      </DRadioGroup>
-      <br />
-      <DRadioGroup dModel={[value, setValue]}>
-        {[1, 2, 3].map((n) => (
-          <DRadio key={n} dValue={n}>
-            Radio {n}
-          </DRadio>
-        ))}
-      </DRadioGroup>
-      <br />
-      <DRadioGroup dModel={[value, setValue]} dSize="larger">
-        {[1, 2, 3].map((n) => (
-          <DRadio key={n} dValue={n}>
-            Radio {n}
-          </DRadio>
-        ))}
-      </DRadioGroup>
-      <br />
       <DRadioGroup dModel={[value, setValue]} dType="outline" dSize="smaller">
         {[1, 2, 3].map((n) => (
           <DRadio key={n} dValue={n}>
diff --git a/packages/ui/src/components/select/Select.tsx b/packages/ui/src/components/select/Select.tsx
index 80c997c3..53fa4d15 100644
--- a/packages/ui/src/components/select/Select.tsx
+++ b/packages/ui/src/components/select/Select.tsx
@@ -448,14 +448,21 @@ export function DSelect<T>(
           let [count] = canSelectItem(dataRef.current.focusId);
           let option: DSelectOption<T> | undefined;
           const getOption = () => {
-            const isEnd = (!down && count === 0) || (down && count === flatOptions.length - 1);
-            count = isEnd ? count : down ? count + 1 : count - 1;
+            if (!down && count === 0) {
+              selectListEl.scrollTop = 0;
+              return;
+            }
+            if (down && count === flatOptions.length - 1) {
+              selectListEl.scrollTop = selectListEl.scrollHeight;
+              return;
+            }
+            count = down ? count + 1 : count - 1;
             let _option: DSelectOption<T> | null = flatOptions[count];
             _option = _option && canSelect(_option) ? _option : null;
             if (_option) {
               option = _option;
             } else {
-              !isEnd && getOption();
+              getOption();
             }
           };
           getOption();
diff --git a/packages/ui/src/components/switch/README.md b/packages/ui/src/components/switch/README.md
new file mode 100644
index 00000000..ebeda708
--- /dev/null
+++ b/packages/ui/src/components/switch/README.md
@@ -0,0 +1,29 @@
+---
+group: Data Entry
+title: Switch
+---
+
+Switch.
+
+## When To Use
+
+Switch on/off status.
+
+## API
+
+### DSwitchProps
+
+Extend `React.HTMLAttributes<HTMLElement>`.
+
+<!-- prettier-ignore-start -->
+| Property | Description | Type | Default | 
+| --- | --- | --- | --- | 
+| dModel | Manually control on/off status | [boolean, Updater\<boolean\>?] | - |
+| dLabelPlacement | Label placement | 'left' \| 'right' | 'right' |
+| dStateContent | Status content | [React.ReactNode, React.ReactNode] | - |
+| dLoading | Loading | boolean | false |
+| dDisabled | Whether to disable | boolean | false |
+| dInputProps | Attributes applied to the `input` element | React.InputHTMLAttributes\<HTMLInputElement\>  | - |
+| dInputRef | Pass a `ref` to the `input` element | React.LegacyRef\<HTMLInputElement\>  | - |
+| onModelChange | Callback for on/off status change | `(checked: boolean) => void` | - |
+<!-- prettier-ignore-end -->
diff --git a/packages/ui/src/components/switch/README.zh-Hant.md b/packages/ui/src/components/switch/README.zh-Hant.md
new file mode 100644
index 00000000..586a49de
--- /dev/null
+++ b/packages/ui/src/components/switch/README.zh-Hant.md
@@ -0,0 +1,28 @@
+---
+title: 开关
+---
+
+开关。
+
+## 何时使用
+
+切换开/关状态。
+
+## API
+
+### DSwitchProps
+
+继承 `React.HTMLAttributes<HTMLElement>`。
+
+<!-- prettier-ignore-start -->
+| 参数 | 说明 | 类型 | 默认值 | 
+| --- | --- | --- | --- | 
+| dModel | 手动控制开/关状态 | [boolean, Updater\<boolean\>?] | - |
+| dLabelPlacement | 标签位置 | 'left' \| 'right' | 'right' |
+| dStateContent | 状态内容 | [React.ReactNode, React.ReactNode] | - |
+| dLoading | 是否加载中 | boolean | false |
+| dDisabled | 是否禁用 | boolean | false |
+| dInputProps | 应用于 `input` 元素的属性 | React.InputHTMLAttributes\<HTMLInputElement\>  | - |
+| dInputRef | 将 `ref` 传递给 `input` 元素 | React.LegacyRef\<HTMLInputElement\>  | - |
+| onModelChange | 开/关状态改变的回调 | `(checked: boolean) => void` | - |
+<!-- prettier-ignore-end -->
diff --git a/packages/ui/src/components/switch/Switch.tsx b/packages/ui/src/components/switch/Switch.tsx
new file mode 100644
index 00000000..7fffa5fa
--- /dev/null
+++ b/packages/ui/src/components/switch/Switch.tsx
@@ -0,0 +1,163 @@
+import type { Updater } from '../../hooks/two-way-binding';
+
+import React, { useCallback, useId, useState } from 'react';
+
+import { DIcon } from '..';
+import { usePrefixConfig, useComponentConfig, useTwoWayBinding, useGeneralState, useRefCallback, useDTransition } from '../../hooks';
+import { getClassName } from '../../utils';
+
+export interface DSwitchProps extends React.HTMLAttributes<HTMLElement> {
+  dModel?: [boolean, Updater<boolean>?];
+  dFormControlName?: string;
+  dLabelPlacement?: 'left' | 'right';
+  dStateContent?: [React.ReactNode, React.ReactNode];
+  dLoading?: boolean;
+  dDisabled?: boolean;
+  dInputProps?: React.InputHTMLAttributes<HTMLInputElement>;
+  dInputRef?: React.LegacyRef<HTMLInputElement>;
+  onModelChange?: (checked: boolean) => void;
+}
+
+export function DSwitch(props: DSwitchProps) {
+  const {
+    dModel,
+    dFormControlName,
+    dLabelPlacement = 'right',
+    dStateContent,
+    dLoading = false,
+    dDisabled = false,
+    dInputProps,
+    dInputRef,
+    onModelChange,
+    id,
+    className,
+    children,
+    onChange,
+    ...restProps
+  } = useComponentConfig(DSwitch.name, props);
+
+  //#region Context
+  const dPrefix = usePrefixConfig();
+  const { gDisabled } = useGeneralState();
+  //#endregion
+
+  //#region Ref
+  const [dotEl, dotRef] = useRefCallback();
+  //#endregion
+
+  const uniqueId = useId();
+  const _id = dInputProps?.id ?? `${dPrefix}switch-input-${uniqueId}`;
+
+  const [isFocus, setIsFocus] = useState(false);
+
+  const [checked, changeChecked, { ariaAttribute, controlDisabled }] = useTwoWayBinding<boolean | undefined, boolean>(
+    false,
+    dModel,
+    onModelChange,
+    dFormControlName ? { formControlName: dFormControlName, id: _id } : undefined
+  );
+
+  const disabled = dDisabled || gDisabled || controlDisabled;
+
+  const handleChange = useCallback<React.ChangeEventHandler<HTMLInputElement>>(
+    (e) => {
+      onChange?.(e);
+
+      changeChecked(!checked);
+    },
+    [onChange, changeChecked, checked]
+  );
+
+  const handleFocus = useCallback(
+    (e) => {
+      dInputProps?.onFocus?.(e);
+
+      setIsFocus(true);
+    },
+    [dInputProps]
+  );
+  const handleBlur = useCallback(
+    (e) => {
+      dInputProps?.onBlur?.(e);
+
+      setIsFocus(false);
+    },
+    [dInputProps]
+  );
+
+  const transitionState = {
+    'enter-from': { left: '2px' },
+    'enter-to': { left: 'calc(100% - 20px)', transition: 'width 133ms ease-in, left 133ms ease-out' },
+    'leave-from': { right: '2px' },
+    'leave-to': { right: 'calc(100% - 20px)', transition: 'width 133ms ease-in, right 133ms ease-out' },
+  };
+  const hidden = useDTransition({
+    dEl: dotEl,
+    dVisible: checked,
+    dCallbackList: {
+      beforeEnter: () => transitionState,
+      beforeLeave: () => transitionState,
+    },
+  });
+
+  return (
+    <label
+      {...restProps}
+      className={getClassName(className, `${dPrefix}switch`, {
+        [`${dPrefix}switch--label-left`]: dLabelPlacement === 'left',
+        'is-checked': checked,
+        'is-disabled': disabled,
+        'is-loading': dLoading,
+      })}
+    >
+      <div className={`${dPrefix}switch__state-container`}>
+        {dStateContent && (
+          <div className={`${dPrefix}switch__state-content`} style={{ opacity: checked ? 1 : 0 }}>
+            {dStateContent[0]}
+          </div>
+        )}
+        {dStateContent && (
+          <div className={`${dPrefix}switch__state-content`} style={{ opacity: checked ? 0 : 1 }}>
+            {dStateContent[1]}
+          </div>
+        )}
+        <input
+          {...dInputProps}
+          {...ariaAttribute}
+          ref={dInputRef}
+          id={_id}
+          className={getClassName(dInputProps?.className, `${dPrefix}switch__input`)}
+          type="checkbox"
+          role="switch"
+          disabled={disabled || dLoading}
+          aria-labelledby={children ? `${dPrefix}switch-label-${uniqueId}` : undefined}
+          aria-checked={checked}
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+        />
+        <div
+          ref={dotRef}
+          className={getClassName(`${dPrefix}switch__state-dot`, {
+            'is-focus': isFocus,
+          })}
+          style={{
+            left: hidden ? 2 : undefined,
+            right: !hidden ? 2 : undefined,
+          }}
+        >
+          {dLoading && (
+            <DIcon viewBox="0 0 1024 1024" dSpin>
+              <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path>
+            </DIcon>
+          )}
+        </div>
+      </div>
+      {children && (
+        <span id={`${dPrefix}switch-label-${uniqueId}`} className={`${dPrefix}switch__label`}>
+          {children}
+        </span>
+      )}
+    </label>
+  );
+}
diff --git a/packages/ui/src/components/switch/demos/1.Basic.md b/packages/ui/src/components/switch/demos/1.Basic.md
new file mode 100644
index 00000000..7cbe0b5d
--- /dev/null
+++ b/packages/ui/src/components/switch/demos/1.Basic.md
@@ -0,0 +1,35 @@
+---
+title:
+  en-US: Basic
+  zh-Hant: 基本
+---
+
+# en-US
+
+The simplest usage.
+
+# zh-Hant
+
+最简单的用法。
+
+```tsx
+import { DSwitch } from '@react-devui/ui';
+
+export default function Demo() {
+  return (
+    <>
+      <div className="app-demo-flex-container">
+        <DSwitch></DSwitch>
+        <DSwitch>Switch</DSwitch>
+      </div>
+      <br />
+      <div className="app-demo-flex-container">
+        <DSwitch dDisabled></DSwitch>
+        <DSwitch dModel={[true]} dDisabled>
+          Switch
+        </DSwitch>
+      </div>
+    </>
+  );
+}
+```
diff --git a/packages/ui/src/components/switch/demos/2.LabelPlacement.md b/packages/ui/src/components/switch/demos/2.LabelPlacement.md
new file mode 100644
index 00000000..976a538d
--- /dev/null
+++ b/packages/ui/src/components/switch/demos/2.LabelPlacement.md
@@ -0,0 +1,21 @@
+---
+title:
+  en-US: Label placement
+  zh-Hant: 标签位置
+---
+
+# en-US
+
+Adjust the label placement through `dLabelPlacement`.
+
+# zh-Hant
+
+通过 `dLabelPlacement` 调整标签位置。
+
+```tsx
+import { DSwitch } from '@react-devui/ui';
+
+export default function Demo() {
+  return <DSwitch dLabelPlacement="left">Switch</DSwitch>;
+}
+```
diff --git a/packages/ui/src/components/switch/demos/3.Content.md b/packages/ui/src/components/switch/demos/3.Content.md
new file mode 100644
index 00000000..499f3cd5
--- /dev/null
+++ b/packages/ui/src/components/switch/demos/3.Content.md
@@ -0,0 +1,27 @@
+---
+title:
+  en-US: Status content
+  zh-Hant: 状态内容
+---
+
+# en-US
+
+Set the display content of different states through `dStateContent`.
+
+# zh-Hant
+
+通过 `dStateContent` 设置不同状态的显示内容。
+
+```tsx
+import { DSwitch, DIcon } from '@react-devui/ui';
+
+export default function Demo() {
+  return (
+    <div className="app-demo-flex-container">
+      <DSwitch dStateContent={[<DIcon dName="check"></DIcon>, <DIcon dName="close"></DIcon>]}></DSwitch>
+      <DSwitch dStateContent={[1, 0]}></DSwitch>
+      <DSwitch dStateContent={['ON', 'OFF']}></DSwitch>
+    </div>
+  );
+}
+```
diff --git a/packages/ui/src/components/switch/demos/4.Loading.md b/packages/ui/src/components/switch/demos/4.Loading.md
new file mode 100644
index 00000000..5bb5b51e
--- /dev/null
+++ b/packages/ui/src/components/switch/demos/4.Loading.md
@@ -0,0 +1,28 @@
+---
+title:
+  en-US: Loading
+  zh-Hant: 加载中
+---
+
+# en-US
+
+Add the `dLoading` attribute to make the switch in the loading state.
+
+# zh-Hant
+
+添加 `dLoading` 属性即可让开关处于加载状态。
+
+```tsx
+import { DSwitch } from '@react-devui/ui';
+
+export default function Demo() {
+  return (
+    <div className="app-demo-flex-container">
+      <DSwitch dLoading></DSwitch>
+      <DSwitch dModel={[true]} dLoading>
+        Switch
+      </DSwitch>
+    </div>
+  );
+}
+```
diff --git a/packages/ui/src/components/switch/index.ts b/packages/ui/src/components/switch/index.ts
new file mode 100644
index 00000000..1b19c1d3
--- /dev/null
+++ b/packages/ui/src/components/switch/index.ts
@@ -0,0 +1 @@
+export * from './Switch';
diff --git a/packages/ui/src/hooks/two-way-binding.ts b/packages/ui/src/hooks/two-way-binding.ts
index 67e95d99..ef37cc07 100644
--- a/packages/ui/src/hooks/two-way-binding.ts
+++ b/packages/ui/src/hooks/two-way-binding.ts
@@ -16,7 +16,7 @@ export function useTwoWayBinding<T, S = T>(
   input?: [T, Updater<S>?],
   onValueChange?: (value: S) => void,
   opt?: {
-    id: string;
+    id?: string;
     formControlName: string;
   }
 ) {
diff --git a/packages/ui/src/styles/_components.scss b/packages/ui/src/styles/_components.scss
index e9cdc2ac..ef130a39 100644
--- a/packages/ui/src/styles/_components.scss
+++ b/packages/ui/src/styles/_components.scss
@@ -22,6 +22,7 @@
 @import 'components/select-box';
 @import 'components/select';
 @import 'components/separator';
+@import 'components/switch';
 @import 'components/tabs';
 @import 'components/tag';
 @import 'components/textarea';
diff --git a/packages/ui/src/styles/components/_button.scss b/packages/ui/src/styles/components/_button.scss
index bfb502b8..8f3ff94c 100644
--- a/packages/ui/src/styles/components/_button.scss
+++ b/packages/ui/src/styles/components/_button.scss
@@ -46,7 +46,8 @@
   }
 
   @include when(loading) {
-    cursor: not-allowed;
+    cursor: wait;
+    filter: opacity(50%);
   }
 
   @include m(primary) {
@@ -59,17 +60,10 @@
 
     background-color: var(--#{$variable-prefix}button-color);
 
-    &:disabled {
-      /* stylelint-disable-next-line scss/no-global-function-names */
+    &:disabled:not(.is-loading) {
       filter: saturate(50%) opacity(50%);
     }
 
-    @include when(loading) {
-      border-color: var(--#{$variable-prefix}button-color-lighter);
-
-      background-color: var(--#{$variable-prefix}button-color-lighter);
-    }
-
     @include button-hover {
       border-color: var(--#{$variable-prefix}button-color-lighter);
 
@@ -90,7 +84,7 @@
 
     background-color: transparent;
 
-    @include utils-disabled(true, ':disabled');
+    @include utils-disabled(true, ':disabled:not(.is-loading)');
 
     @include button-hover {
       border-color: var(--#{$variable-prefix}button-color-lighter);
@@ -114,7 +108,7 @@
 
     background-color: transparent;
 
-    &:disabled {
+    &:disabled:not(.is-loading) {
       border-color: var(--#{$variable-prefix}border-color);
 
       color: var(--#{$variable-prefix}disabled-color);
@@ -142,7 +136,7 @@
 
     background-color: transparent;
 
-    &:disabled {
+    &:disabled:not(.is-loading) {
       border-color: var(--#{$variable-prefix}border-color);
 
       color: var(--#{$variable-prefix}disabled-color);
@@ -168,7 +162,7 @@
 
     background-color: transparent;
 
-    @include utils-disabled(true, ':disabled');
+    @include utils-disabled(true, ':disabled:not(.is-loading)');
 
     @include button-hover {
       color: var(--#{$variable-prefix}button-color-lighter);
@@ -190,7 +184,7 @@
 
     background-color: transparent;
 
-    &:disabled {
+    &:disabled:not(.is-loading) {
       color: var(--#{$variable-prefix}disabled-color);
     }
 
diff --git a/packages/ui/src/styles/components/_checkbox.scss b/packages/ui/src/styles/components/_checkbox.scss
index 8ac916cc..b15686cd 100644
--- a/packages/ui/src/styles/components/_checkbox.scss
+++ b/packages/ui/src/styles/components/_checkbox.scss
@@ -18,8 +18,6 @@
   display: inline-flex;
   align-items: center;
 
-  font-size: var(--#{$variable-prefix}font);
-
   cursor: pointer;
 
   @include utils-disabled;
@@ -98,14 +96,6 @@
     }
   }
 
-  @include m(smaller) {
-    --#{$variable-prefix}font: var(--#{$variable-prefix}font-smaller);
-  }
-
-  @include m(larger) {
-    --#{$variable-prefix}font: var(--#{$variable-prefix}font-larger);
-  }
-
   @include e(input-wrapper) {
     position: relative;
 
diff --git a/packages/ui/src/styles/components/_compose.scss b/packages/ui/src/styles/components/_compose.scss
index 85f6007b..d8677f6b 100644
--- a/packages/ui/src/styles/components/_compose.scss
+++ b/packages/ui/src/styles/components/_compose.scss
@@ -2,6 +2,7 @@
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
+  width: 100%;
 
   & > * {
     margin: 0 !important;
diff --git a/packages/ui/src/styles/components/_dialog.scss b/packages/ui/src/styles/components/_dialog.scss
index 0f679c2b..b74e1ad8 100644
--- a/packages/ui/src/styles/components/_dialog.scss
+++ b/packages/ui/src/styles/components/_dialog.scss
@@ -4,8 +4,6 @@
   right: 0;
   bottom: 0;
   left: 0;
-
-  overflow: hidden;
 }
 
 @include b(mask) {
diff --git a/packages/ui/src/styles/components/_drawer.scss b/packages/ui/src/styles/components/_drawer.scss
index f824ccb2..150caf81 100644
--- a/packages/ui/src/styles/components/_drawer.scss
+++ b/packages/ui/src/styles/components/_drawer.scss
@@ -7,7 +7,6 @@
     flex-direction: column;
     max-width: 100%;
     height: 100%;
-    overflow: hidden;
 
     background-color: var(--#{$variable-prefix}background-color);
     box-shadow: 0 8px 40px 0 var(--#{$variable-prefix}shadow-color);
diff --git a/packages/ui/src/styles/components/_form.scss b/packages/ui/src/styles/components/_form.scss
index 50fa28fe..920ed852 100644
--- a/packages/ui/src/styles/components/_form.scss
+++ b/packages/ui/src/styles/components/_form.scss
@@ -59,8 +59,6 @@
 @include b(form-item) {
   position: relative;
 
-  overflow: hidden;
-
   @include m(vertical) {
     @include e(container) {
       flex-direction: column;
@@ -77,6 +75,7 @@
   @include e(container) {
     display: flex;
     align-items: center;
+    width: 100%;
   }
 
   @include e(label) {
@@ -101,8 +100,6 @@
 
     @include m(colon) {
       &::after {
-        position: relative;
-
         margin-left: 2px;
 
         content: ':';
@@ -127,10 +124,14 @@
 
   @include e(content) {
     position: relative;
+
+    display: inline-flex;
+    align-items: center;
   }
 
   @include e(pending) {
     position: absolute;
+    z-index: 100;
 
     display: block;
     overflow: hidden;
diff --git a/packages/ui/src/styles/components/_notification.scss b/packages/ui/src/styles/components/_notification.scss
index 9c3aa576..8894f402 100644
--- a/packages/ui/src/styles/components/_notification.scss
+++ b/packages/ui/src/styles/components/_notification.scss
@@ -43,7 +43,6 @@
   margin-bottom: 20px;
   padding: 16px 24px;
   border-radius: var(--#{$variable-prefix}border-radius);
-  overflow: hidden;
 
   background-color: var(--#{$variable-prefix}background-color);
   outline: none;
diff --git a/packages/ui/src/styles/components/_radio.scss b/packages/ui/src/styles/components/_radio.scss
index 28538a88..f3850296 100644
--- a/packages/ui/src/styles/components/_radio.scss
+++ b/packages/ui/src/styles/components/_radio.scss
@@ -18,6 +18,8 @@
     height: var(--#{$variable-prefix}size);
     border: 1px solid var(--#{$variable-prefix}border-color);
 
+    font-size: var(--#{$variable-prefix}font);
+
     transition: border-color 116ms linear, background-color 116ms linear;
 
     &:first-of-type {
@@ -73,8 +75,6 @@
   display: inline-flex;
   align-items: center;
 
-  font-size: var(--#{$variable-prefix}font);
-
   cursor: pointer;
 
   @include utils-disabled;
@@ -129,14 +129,6 @@
     }
   }
 
-  @include m(smaller) {
-    --#{$variable-prefix}font: var(--#{$variable-prefix}font-smaller);
-  }
-
-  @include m(larger) {
-    --#{$variable-prefix}font: var(--#{$variable-prefix}font-larger);
-  }
-
   @include e(input-wrapper) {
     position: relative;
 
diff --git a/packages/ui/src/styles/components/_select-box.scss b/packages/ui/src/styles/components/_select-box.scss
index 82a4f18d..c231b3c2 100644
--- a/packages/ui/src/styles/components/_select-box.scss
+++ b/packages/ui/src/styles/components/_select-box.scss
@@ -104,7 +104,6 @@
     border: none;
 
     font: inherit;
-    font-size: var(--#{$variable-prefix}font);
     letter-spacing: inherit;
 
     outline: none;
diff --git a/packages/ui/src/styles/components/_switch.scss b/packages/ui/src/styles/components/_switch.scss
new file mode 100644
index 00000000..0d949501
--- /dev/null
+++ b/packages/ui/src/styles/components/_switch.scss
@@ -0,0 +1,130 @@
+/* stylelint-disable declaration-property-value-allowed-list */
+@keyframes switch-focus {
+  0% {
+    box-shadow: 0 0 0 8px rgb(var(--#{$variable-prefix}color-primary-rgb) / 16%);
+  }
+
+  100% {
+    box-shadow: 0 0 0 10px rgb(var(--#{$variable-prefix}color-primary-rgb) / 24%);
+  }
+}
+
+@include b(switch) {
+  position: relative;
+
+  display: inline-flex;
+  gap: 0 var(--#{$variable-prefix}margin-size);
+  align-items: center;
+
+  &:not(.is-disabled):not(.is-loading) {
+    &:active {
+      @include e(state-dot) {
+        width: 22px;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    filter: saturate(50%) opacity(50%);
+
+    @include e(input) {
+      cursor: not-allowed;
+    }
+  }
+
+  @include when(loading) {
+    filter: opacity(50%);
+
+    @include e(input) {
+      cursor: wait;
+    }
+  }
+
+  @include when(checked) {
+    @include e(state-container) {
+      background-color: var(--#{$variable-prefix}color-primary);
+    }
+  }
+
+  @include m(label-left) {
+    flex-direction: row-reverse;
+  }
+
+  @include e(input) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 5;
+
+    width: 100%;
+    height: 100%;
+    margin: 0;
+
+    cursor: pointer;
+
+    opacity: 0;
+
+    appearance: none;
+  }
+
+  @include e(state-container) {
+    position: relative;
+
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+
+    min-width: 42px;
+    height: 22px;
+    padding: 0 6px;
+    border-radius: 11px;
+
+    background-color: var(--#{$variable-prefix}color-step-100);
+
+    transition: background-color 0.1s ease-out;
+  }
+
+  @include e(state-content) {
+    display: inline-flex;
+    justify-content: center;
+    min-width: 1em;
+
+    color: #fff;
+    font-size: 14px;
+    line-height: 1;
+
+    transition: opacity 0.1s ease-out;
+
+    &:first-of-type {
+      margin-right: auto;
+    }
+  }
+
+  @include e(state-dot) {
+    position: absolute;
+    top: 2px;
+    z-index: 1;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 18px;
+    height: 18px;
+    border-radius: 9px;
+
+    color: var(--#{$variable-prefix}color-primary);
+
+    font-size: 14px;
+
+    background-color: var(--#{$variable-prefix}background-color);
+    box-shadow: 0 2px 1px -1px var(--#{$variable-prefix}shadow-color), 0 0 4px 0 var(--#{$variable-prefix}shadow-color);
+
+    transition: width 133ms ease-in;
+
+    @include when(focus) {
+      animation: switch-focus 1.2s linear infinite alternate;
+      animation-fill-mode: both;
+    }
+  }
+}
diff --git a/packages/ui/src/styles/components/_tabs.scss b/packages/ui/src/styles/components/_tabs.scss
index f42315d9..db109225 100644
--- a/packages/ui/src/styles/components/_tabs.scss
+++ b/packages/ui/src/styles/components/_tabs.scss
@@ -336,6 +336,8 @@
 
     display: inline-flex;
 
+    @include font-size(1rem);
+
     &::after {
       position: absolute;
 
diff --git a/packages/ui/src/styles/components/_tag.scss b/packages/ui/src/styles/components/_tag.scss
index cea8088c..6ec0b143 100644
--- a/packages/ui/src/styles/components/_tag.scss
+++ b/packages/ui/src/styles/components/_tag.scss
@@ -1,7 +1,6 @@
 @include b(tag) {
   --#{$variable-prefix}tag-padding-size: 8px;
   --#{$variable-prefix}tag-size: 28px;
-  @include rfs(0.9rem, --#{$variable-prefix}tag-font);
 
   display: inline-flex;
   align-items: center;
@@ -9,10 +8,10 @@
   padding: 0 var(--#{$variable-prefix}tag-padding-size);
   border-radius: var(--#{$variable-prefix}border-radius);
 
-  font-size: var(--#{$variable-prefix}tag-font);
-
   vertical-align: top;
 
+  @include font-size(0.9rem);
+
   @include m(primary) {
     color: var(--#{$variable-prefix}tag-color, var(--#{$variable-prefix}text-color));
 
@@ -45,13 +44,15 @@
   @include m(smaller) {
     --#{$variable-prefix}tag-padding-size: 6px;
     --#{$variable-prefix}tag-size: 24px;
-    @include rfs(0.75rem, --#{$variable-prefix}tag-font);
+
+    @include font-size(0.75rem);
   }
 
   @include m(larger) {
     --#{$variable-prefix}tag-padding-size: 10px;
     --#{$variable-prefix}tag-size: 32px;
-    @include rfs(1rem, --#{$variable-prefix}tag-font);
+
+    @include font-size(1rem);
   }
 
   @include e(close) {
diff --git a/packages/ui/src/styles/components/_textarea.scss b/packages/ui/src/styles/components/_textarea.scss
index c974ea56..421ce7c9 100644
--- a/packages/ui/src/styles/components/_textarea.scss
+++ b/packages/ui/src/styles/components/_textarea.scss
@@ -8,7 +8,6 @@
   border-radius: var(--#{$variable-prefix}border-radius);
 
   font: inherit;
-  font-size: var(--#{$variable-prefix}font);
   line-height: 24px;
   letter-spacing: inherit;
 
@@ -50,7 +49,6 @@
 
   @include e(count) {
     color: var(--#{$variable-prefix}color-step-400);
-    font-size: var(--#{$variable-prefix}font);
     line-height: 28px;
     text-align: right;
     font-variant-numeric: tabular-nums;
diff --git a/packages/ui/src/styles/components/_toast.scss b/packages/ui/src/styles/components/_toast.scss
index 225cc2f0..4648d663 100644
--- a/packages/ui/src/styles/components/_toast.scss
+++ b/packages/ui/src/styles/components/_toast.scss
@@ -32,7 +32,6 @@
   margin: 0 auto 12px;
   padding: 8px 16px;
   border-radius: var(--#{$variable-prefix}border-radius);
-  overflow: hidden;
 
   background-color: var(--#{$variable-prefix}background-color);
   box-shadow: 0 4px 20px 0 var(--#{$variable-prefix}shadow-color);