diff --git a/src/runtime/components/forms/Checkbox.vue b/src/runtime/components/forms/Checkbox.vue index 78a50009..252afa4b 100644 --- a/src/runtime/components/forms/Checkbox.vue +++ b/src/runtime/components/forms/Checkbox.vue @@ -39,6 +39,7 @@ import type { Strategy } from '../../types' import appConfig from '#build/app.config' import { checkbox } from '#ui/ui.config' import colors from '#ui-colors' +import { useId } from '#app' const config = mergeConfig(appConfig.ui.strategy, appConfig.ui.checkbox, checkbox) @@ -105,7 +106,8 @@ export default defineComponent({ setup (props, { emit }) { const { ui, attrs } = useUI('checkbox', toRef(props, 'ui'), config, toRef(props, 'class')) - const { emitFormChange, color, name, inputId } = useFormGroup(props) + const { emitFormChange, color, name, inputId: _inputId } = useFormGroup(props) + const inputId = _inputId.value ?? useId() const toggle = computed({ get () {