Components

Checkbox

Standalone checkbox control for capturing boolean input, usable independently or within custom form layouts.

Component

View code

Show playground

Props	Required	Default	Type
`id`	`true`	—	`string`
`modelValue`	—	`false`	`boolean`
`disabled`	—	`false`	`boolean`
`size`	—	`ControlFieldSize.MD`	`ControlFieldSize`

Sets the id of the underlying native checkbox input.

 <template>
    <Checkbox id="my-checkbox" />
</template>

Controls the checked state of the checkbox. Use v-model for two-way binding.

 <template>
    <Checkbox id="my-checkbox" v-model="isChecked" />
</template>
<script setup lang="ts">
const isChecked = ref(false)
</script>

Sets the disabled state of the checkbox. When disabled, clicks are ignored and the checkbox appearance reflects the inactive state.

 <template>
    <Checkbox id="my-checkbox" disabled />
</template>

Sets the size of the checkbox. It uses the ControlFieldSize enum.

 <template>
    <Checkbox id="my-checkbox" :size="ControlFieldSize.LG" />
</template>