Components

TriStateSwitch

Standalone switch 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`
`styleType`	—	`SwitchStyle.BRAND`	`SwitchStyle`

Usage

id

Sets the id of the underlying native checkbox input.

 <template>
    <TriStateSwitch id="my-switch" />
</template>

Type: string
Required: true

modelValue

Controls the state of the switch. 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 computing a partial-selection state), matching how tri-state checkboxes behave natively.

 <template>
    <TriStateSwitch id="my-switch" 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 switch is off.
`CHECKED`	The switch is on.
`INDETERMINATE`	The switch is in a partial/mixed state. The handle rests in the middle and aria-checked is set to "mixed".

disabled

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

 <template>
    <TriStateSwitch id="my-switch" disabled />
</template>

Type: boolean
Default: false

size

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

 <template>
    <TriStateSwitch id="my-switch" :size="ControlFieldSize.LG" />
</template>

Type: ControlFieldSize
Default: ControlFieldSize.MD

Options

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

styleType

Sets the style type of the switch. It uses the SwitchStyle enum.

 <template>
    <TriStateSwitch id="my-switch" :styleType="SwitchStyle.SUCCESS" />
</template>

Type: SwitchStyle
Default: SwitchStyle.BRAND

Options

Value	Description
`BRAND`	Uses the primary brand color for the background when the switch is on or indeterminate.
`SUCCESS`	Uses the success color for the background when the switch is on or indeterminate.