Checkbox

Base input element to toggle an option on and off.
stableView sourceRadix ThemesReka UI
vue
<script setup lang="ts">
import { ref } from 'vue'
import { Checkbox } from '@typlog/ui'

const checked = ref(true)
</script>

<template>
  <label class="flex items-center gap-2">
    <Checkbox v-model="checked" />
    <span>Agree to Terms and Conditions</span>
  </label>
</template>

API Reference ​

PropDefaultType
color
–
Color
highContrast
–
boolean
size
–
"1""2""3"
variant
–
"soft""surface"

Examples ​

Size ​

vue
<script setup lang="ts">
import { Checkbox } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <Checkbox size="1" />
    <Checkbox size="2" />
    <Checkbox size="3" />
  </div>
</template>

State ​

vue
<script setup lang="ts">
import { Checkbox } from '@typlog/ui'
</script>

<template>
  <div class="flex items-center gap-2">
    <Checkbox />
    <Checkbox default-value="indeterminate" />
    <Checkbox :default-value="true" />
  </div>
</template>