Personizely UI

Appearance

Checkbox ​

Renders an accessible checkbox element.

Examples ​

Basic checkbox ​

Code

vue
<template>
  <Checkbox v-model="value" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Checkbox } from '@/components/ui/checkbox'

const value = ref(false)
</script>

Checkbox with a label ​

Code

vue
<template>
  <Checkbox v-model="value" label="This is a label" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Checkbox } from '@/components/ui/checkbox'

const value = ref(false)
</script>

Checkbox with a help message ​

This is a help message for additional information.

Code

vue
<template>
  <Checkbox v-model="value" label="This is a label" help="This is a help message for additional information." />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Checkbox } from '@/components/ui/checkbox'

const value = ref(false)
</script>

Disabled checkbox ​

Code

vue
<template>
  <Checkbox v-model="value" label="This is a label" disabled />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Checkbox } from '@/components/ui/checkbox'

const value = ref(false)
</script>