feat(radio, checkbox, switch): support tabindex

haoziqaq · haoziqaq · commit 2a3f86c1cdaa · 2025-11-17T22:05:08.000+08:00
diff --git a/packages/varlet-ui/src/checkbox-group/docs/en-US.md b/packages/varlet-ui/src/checkbox-group/docs/en-US.md
@@ -349,6 +349,7 @@ const value = ref([])
 | `indeterminate` | Whether indeterminate status(style has the highest priority) | _boolean_ | `false` |
 | `ripple` | Whether to open ripple | _boolean_ | `true` |
 | `rules` | Validation rules, return `true` to indicate verification passes, other types of values ​​will be converted into text as user prompts. [Zod validation](#/en-US/zodValidation) is supported since `3.5.0` | _(v: string) => any \| ZodType \| Array<(v: string) => any \| ZodType>_ | `-` |
+| `tabindex` ***3.12.2*** | Consistent with the tabindex property of native input  | _string_ | `-` |
 
 ### Methods
 
diff --git a/packages/varlet-ui/src/checkbox-group/docs/zh-CN.md b/packages/varlet-ui/src/checkbox-group/docs/zh-CN.md
@@ -348,6 +348,7 @@ const value = ref([])
 | `indeterminate` | 是否为不确定状态（样式优先级最高） | _boolean_ | `false` |
 | `ripple` | 是否开启水波纹 | _boolean_ | `true` |
 | `rules` | 验证规则，返回 `true` 表示验证通过，其它类型的值将转换为文本作为用户提示。自 `3.5.0` 开始支持 [Zod 验证](#/zh-CN/zodValidation)  | _(v: string) => any \| ZodType \| Array<(v: string) => any \| ZodType>_ | `-` |
+| `tabindex` ***3.12.2*** | 与原生 input 的 tabindex 属性一致  | _string_ | `-` |
 
 ### 方法
 
diff --git a/packages/varlet-ui/src/checkbox/Checkbox.vue b/packages/varlet-ui/src/checkbox/Checkbox.vue
@@ -6,7 +6,7 @@
       :aria-checked="isIndeterminate ? 'mixed' : checked"
       :aria-disabled="formDisabled || disabled"
       :class="n()"
-      :tabindex="disabled || formDisabled ? undefined : '0'"
+      :tabindex="tabindex == null ? (disabled || formDisabled ? undefined : '0') : tabindex"
       @focus="isFocusing = true"
       @blur="isFocusing = false"
       @click="handleClick"
diff --git a/packages/varlet-ui/src/checkbox/docs/en-US.md b/packages/varlet-ui/src/checkbox/docs/en-US.md
@@ -15,6 +15,7 @@
 | `indeterminate` | Whether indeterminate status(style has the highest priority) | _boolean_ | `false` |
 | `ripple` | Whether to open ripple | _boolean_ | `true` |
 | `rules` | Validation rules, return `true` to indicate verification passes, other types of values ​​will be converted into text as user prompts. [Zod validation](#/en-US/zodValidation) is supported since `3.5.0` | _((v: any) => any) \| ZodType \| Array<((v: any) => any) \| ZodType>_ | `-` |
+| `tabindex` ***3.12.2*** | Consistent with the tabindex property of native input  | _string_ | `-` |
 
 ### Events
 
diff --git a/packages/varlet-ui/src/checkbox/docs/zh-CN.md b/packages/varlet-ui/src/checkbox/docs/zh-CN.md
@@ -15,6 +15,7 @@
 | `indeterminate` | 是否为不确定状态（样式优先级最高） | _boolean_ | `false` |
 | `ripple` | 是否开启水波纹 | _boolean_ | `true` |
 | `rules` | 验证规则，返回 `true` 表示验证通过，其它类型的值将转换为文本作为用户提示。自 `3.5.0` 开始支持 [Zod 验证](#/zh-CN/zodValidation)  | _((v: any) => any) \| ZodType \| Array<((v: any) => any) \| ZodType>_ | `-` |
+| `tabindex` ***3.12.2*** | 与原生 input 的 tabindex 属性一致  | _string_ | `-` |
 
 ### 事件
 
diff --git a/packages/varlet-ui/src/checkbox/props.ts b/packages/varlet-ui/src/checkbox/props.ts
@@ -1,4 +1,4 @@
-import type { PropType } from 'vue'
+import type { InputHTMLAttributes, PropType } from 'vue'
 import { defineListenerProp } from '../utils/components'
 
 export type CheckboxValidateTrigger = 'onChange'
@@ -21,6 +21,7 @@ export const props = {
   disabled: Boolean,
   readonly: Boolean,
   indeterminate: Boolean,
+  tabindex: String as PropType<InputHTMLAttributes['tabindex']>,
   iconSize: [String, Number],
   ripple: {
     type: Boolean,
diff --git a/packages/varlet-ui/src/radio-group/docs/en-US.md b/packages/varlet-ui/src/radio-group/docs/en-US.md
@@ -293,6 +293,7 @@ const value = ref(false)
 | `disabled` | Whether the disabled | _boolean_ | `false` |
 | `ripple` | Whether to open ripple | _boolean_ | `true` |
 | `rules` | Validation rules, return `true` to indicate verification passes, other types of values ​​will be converted into text as user prompts. [Zod validation](#/en-US/zodValidation) is supported since `3.5.0` | _((v: string) => any) \| ZodType \| Array<((v: string) => any) \| ZodType>_ | `-` |
+| `tabindex` ***3.12.2*** | Consistent with the tabindex property of native input  | _string_ | `-` |
 
 ### Methods
 
diff --git a/packages/varlet-ui/src/radio-group/docs/zh-CN.md b/packages/varlet-ui/src/radio-group/docs/zh-CN.md
@@ -293,6 +293,7 @@ const value = ref(false)
 | `readonly` | 是否只读 | _boolean_ | `false` |
 | `ripple` | 是否开启水波纹 | _boolean_ | `true` |
 | `rules` | 验证规则，返回 `true` 表示验证通过，其它类型的值将转换为文本作为用户提示。自 `3.5.0` 开始支持 [Zod 验证](#/zh-CN/zodValidation)  | _(v: string) => any \| ZodType \| Array<(v: string) => any \| ZodType>_ | `-` |
+| `tabindex` ***3.12.2*** | 与原生 input 的 tabindex 属性一致  | _string_ | `-` |
 
 ### 方法
 
diff --git a/packages/varlet-ui/src/radio/Radio.vue b/packages/varlet-ui/src/radio/Radio.vue
@@ -95,6 +95,10 @@ export default defineComponent({
       const isChecked = checked.value
       const hasCheckedInRadioGroup = radioGroup?.hasChecked.value
 
+      if (props.tabindex != null) {
+        return props.tabindex
+      }
+
       if (disabled) {
         return
       }
diff --git a/packages/varlet-ui/src/radio/docs/en-US.md b/packages/varlet-ui/src/radio/docs/en-US.md
@@ -14,6 +14,7 @@
 | `disabled` | Whether the disabled | _boolean_ | `false` |
 | `ripple` | Whether to open ripple | _boolean_ | `true` |
 | `rules` | Validation rules, return `true` to indicate verification passes, other types of values ​​will be converted into text as user prompts. [Zod validation](#/en-US/zodValidation) is supported since `3.5.0` | _((v: any) => any) \| ZodType \| Array<((v: any) => any) \| ZodType>_ | `-` |
+| `tabindex` ***3.12.2*** | Consistent with the tabindex property of native input  | _string_ | `-` |
 
 ### Events
 
diff --git a/packages/varlet-ui/src/radio/docs/zh-CN.md b/packages/varlet-ui/src/radio/docs/zh-CN.md
@@ -14,6 +14,7 @@
 | `readonly` | 是否只读 | _boolean_ | `false` |
 | `ripple` | 是否开启水波纹 | _boolean_ | `true` |
 | `rules` | 验证规则，返回 `true` 表示验证通过，其它类型的值将转换为文本作为用户提示。自 `3.5.0` 开始支持 [Zod 验证](#/zh-CN/zodValidation)  | _((v: any) => any) \| ZodType \| Array<((v: any) => any) \| ZodType>_ | `-` |
+| `tabindex` ***3.12.2*** | 与原生 input 的 tabindex 属性一致  | _string_ | `-` |
 
 ### 事件
 
diff --git a/packages/varlet-ui/src/radio/props.ts b/packages/varlet-ui/src/radio/props.ts
@@ -1,4 +1,4 @@
-import { type PropType } from 'vue'
+import { InputHTMLAttributes, type PropType } from 'vue'
 import { defineListenerProp } from '../utils/components'
 
 export type RadioValidateTrigger = 'onChange'
@@ -20,6 +20,7 @@ export const props = {
   readonly: Boolean,
   checkedColor: String,
   uncheckedColor: String,
+  tabindex: String as PropType<InputHTMLAttributes['tabindex']>,
   iconSize: [String, Number],
   ripple: {
     type: Boolean,
diff --git a/packages/varlet-ui/src/switch/Switch.vue b/packages/varlet-ui/src/switch/Switch.vue
@@ -21,7 +21,7 @@
         }"
         :class="classes(n('ripple'), [isActive, n('ripple--active')])"
         :style="styleComputed.ripple"
-        :tabindex="disabled || formDisabled ? undefined : '0'"
+        :tabindex="tabindex == null ? (disabled || formDisabled ? undefined : '0') : tabindex"
         @focus="isFocusing = true"
         @blur="isFocusing = false"
       >
diff --git a/packages/varlet-ui/src/switch/docs/en-US.md b/packages/varlet-ui/src/switch/docs/en-US.md
@@ -174,6 +174,7 @@ const value = ref(true)
 | `lazy-change`    | Whether to allow the `before-change` event to be triggered | _boolean_  | `false` |
 | `validate-trigger` | Timing to trigger verification, optional values are `onChange` `onLazyChange` | _SwitchValidateTrigger[]_ | `['onChange', 'onLazyChange']` |
 | `variant` ***3.2.3*** | Variant mode | _boolean_ | `false` |
+| `tabindex` ***3.12.2*** | Consistent with the tabindex property of native input  | _string_ | `-` |
 
 ### Events
 
diff --git a/packages/varlet-ui/src/switch/docs/zh-CN.md b/packages/varlet-ui/src/switch/docs/zh-CN.md
@@ -174,6 +174,7 @@ const value = ref(true)
 | `lazy-change`    | 是否允许触发 `before-change` 事件 | _boolean_  | `false` |
 | `validate-trigger` | 触发验证的时机，可选值为 `onChange` `onLazyChange` | _SwitchValidateTrigger[]_ | `['onChange', 'onLazyChange']` |
 | `variant` ***3.2.3*** | 变体模式 | _boolean_ | `false` |
+| `tabindex` ***3.12.2*** | 与原生 input 的 tabindex 属性一致  | _string_ | `-` |
 
 ### 事件
 
diff --git a/packages/varlet-ui/src/switch/props.ts b/packages/varlet-ui/src/switch/props.ts
@@ -1,4 +1,4 @@
-import { type PropType } from 'vue'
+import { type InputHTMLAttributes, type PropType } from 'vue'
 import { defineListenerProp } from '../utils/components'
 
 export type SwitchValidateTrigger = 'onChange' | 'onLazyChange'
@@ -23,6 +23,7 @@ export const props = {
   size: [String, Number],
   variant: Boolean,
   rules: [Array, Function, Object] as PropType<any>,
+  tabindex: String as PropType<InputHTMLAttributes['tabindex']>,
   ripple: {
     type: Boolean,
     default: true,
diff --git a/packages/varlet-ui/types/checkbox.d.ts b/packages/varlet-ui/types/checkbox.d.ts
@@ -1,4 +1,4 @@
-import { VNode } from 'vue'
+import { InputHTMLAttributes, VNode } from 'vue'
 import { BasicAttributes, Rules as CheckboxRules, ListenerProp, SetPropsDefaults, VarComponent } from './varComponent'
 
 export declare const checkboxProps: Record<keyof CheckboxProps, any>
@@ -18,6 +18,7 @@ export interface CheckboxProps extends BasicAttributes {
   ripple?: boolean
   validateTrigger?: Array<CheckboxValidateTrigger>
   rules?: CheckboxRules
+  tabindex?: InputHTMLAttributes['tabindex']
   onClick?: ListenerProp<(e: Event) => void>
   onChange?: ListenerProp<(value: any, indeterminate: boolean) => void>
   'onUpdate:modelValue'?: ListenerProp<(value: any) => void>
diff --git a/packages/varlet-ui/types/radio.d.ts b/packages/varlet-ui/types/radio.d.ts
@@ -1,4 +1,4 @@
-import { VNode } from 'vue'
+import { InputHTMLAttributes, VNode } from 'vue'
 import { BasicAttributes, ListenerProp, Rules as RadioRules, SetPropsDefaults, VarComponent } from './varComponent'
 
 export declare const radioProps: Record<keyof RadioProps, any>
@@ -16,6 +16,7 @@ export interface RadioProps extends BasicAttributes {
   iconSize?: string | number
   ripple?: boolean
   validateTrigger?: Array<RadioValidateTrigger>
+  tabindex?: InputHTMLAttributes['tabindex']
   rules?: RadioRules
   onClick?: ListenerProp<(e: Event) => void>
   onChange?: ListenerProp<(value: any) => void>
diff --git a/packages/varlet-ui/types/switch.d.ts b/packages/varlet-ui/types/switch.d.ts
@@ -1,3 +1,4 @@
+import { InputHTMLAttributes } from 'vue'
 import { BasicAttributes, ListenerProp, SetPropsDefaults, Rules as SwitchRules, VarComponent } from './varComponent'
 
 export declare const switchProps: Record<keyof SwitchProps, any>
@@ -21,6 +22,7 @@ export interface SwitchProps extends BasicAttributes {
   validateTrigger?: Array<SwitchValidateTrigger>
   variant?: boolean
   rules?: SwitchRules
+  tabindex?: InputHTMLAttributes['tabindex']
   onClick?: ListenerProp<(event: Event) => void>
   onChange?: ListenerProp<(value: any) => void>
   'onUpdate:modelValue'?: ListenerProp<(value: any) => void>
