checked prop does nothing in Checkbox

[ruchamahabal]

checked prop does nothing in Checkbox. It only depends on modelValue

frappe-ui/src/components/Checkbox.vue

Lines 1 to 45 in a514718

	<template>
	<div
	class="inline-flex items-center space-x-2 rounded transition"
	:class="{
	'px-2.5 py-1.5': padding && size === 'sm',
	'px-3 py-2': padding && size === 'md',
	'focus-within:bg-gray-100 focus-within:ring-2 focus-within:ring-gray-400 hover:bg-gray-200 active:bg-gray-300':
	padding && !disabled,
	}"
	>
	<input
	class="rounded-sm"
	:class="inputClasses"
	type="checkbox"
	:disabled="disabled"
	:id="htmlId"
	:checked="Boolean(modelValue)"
	@change="
	(e) =>
	$emit('update:modelValue', (e.target as HTMLInputElement).checked)
	"
	v-bind="attrs"
	/>
	<label class="block" :class="labelClasses" v-if="label" :for="htmlId">
	{{ label }}
	</label>
	</div>
	</template>
	<script lang="ts" setup>
	import { computed, useAttrs } from 'vue'
	import { useId } from '../utils/useId'
	interface CheckboxProps {
	size?: 'sm' | 'md'
	label?: string
	checked?: boolean
	disabled?: boolean
	padding?: boolean
	modelValue?: boolean | 1 | 0
	id?: string
	}
	const props = withDefaults(defineProps<CheckboxProps>(), {
	size: 'sm',
	padding: false,
	})

Should we remove it? Will lead to warnings for Extraneous non-props attributes were passed
Should we wire it? Will change behavior if someone has set the prop value

[netchampfaris]

We should probably sync it with modelValue such that both work:

<Checkbox v-model="checked" />

<Checkbox v-model:checked="checked" />