Checkbox

Basic checkbox

<FuiCheckbox />

Checked state

<FuiCheckbox :model-value="true" />

Disabled

<FuiCheckbox disabled />
<FuiCheckbox :model-value="true" disabled />

Multi-select

Apple Banana Orange

Selected: (none)

<script setup>
import { ref, computed } from 'vue'

const checked = ref({ apple: false, banana: false, orange: false })
const selectedItems = computed(() =>
  Object.entries(checked.value).filter(([, v]) => v).map(([k]) => k)
)
</script>

<FuiStack spacing="s">
  <label v-for="key of ['apple', 'banana', 'orange']" :key="key" style="display:flex;align-items:center;gap:8px">
    <FuiCheckbox v-model="checked[key]" />
    {{ key }}
  </label>
</FuiStack>
<div>Selected: {{ selectedItems.join(', ') || '(none)' }}</div>

Props

Prop	Type	Default	Description
modelValue	boolean	false	Checked state
disabled	boolean	false	Disabled state