Components

TriStateCheckbox

Standalone checkbox control supporting an indeterminate state, usable independently or within custom form layouts.

Component

View code

Show playground

Props

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

Usage

id

Sets the id of the underlying native checkbox input.

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

Type: string
Required: true

modelValue

Controls the state of the checkbox. Use v-model for two-way binding. It uses the TriStateValue enum.

Clicking or pressing space always resolves to TriStateValue.CHECKED or TriStateValue.UNCHECKED. TriStateValue.INDETERMINATE can only be set programmatically (for example, from a parent "select all" checkbox computing a partial-selection state), matching how tri-state checkboxes behave natively.

 <template>
    <TriStateCheckbox id="my-checkbox" v-model="state" />
</template>
<script setup lang="ts">
const state = ref<TriStateValue>(TriStateValue.INDETERMINATE)
</script>

Type: TriStateValue
Default: TriStateValue.UNCHECKED

Options

Value	Description
`UNCHECKED`	The checkbox is unchecked.
`CHECKED`	The checkbox is checked.
`INDETERMINATE`	The checkbox is in a partial/mixed state. Renders a dash icon and sets aria-checked to "mixed".

disabled

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

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

Type: boolean
Default: false

size

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

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

Type: ControlFieldSize
Default: ControlFieldSize.MD

Options

Value	Description
`XS`	Extra Small
`SM`	Small
`MD`	Medium
`LG`	Large