Checkbox

Installation#

pnpmnpmyarnbun
pnpm dlx shadcn@latest add @force-ui-vue/checkbox
Copy

Usage#

Copy<script setup lang="ts">
import { Checkbox } from "@/components/ui/checkbox"
</script>
 
<template>
  <Checkbox />
</template>

Checked State#

Use :default-value for uncontrolled checkboxes, or :checked and @checked-change to control the state.

Copy<script setup lang="ts">
import { ref } from "vue"
 
import { Checkbox } from "@/components/ui/checkbox"
 
const checked = ref(false)
</script>
 
<template>
  <Checkbox :checked="checked" @checked-change="checked = $event" />
</template>

Invalid State#

Set aria-invalid on the checkbox and data-invalid on the field wrapper to show the invalid styles.

Examples#

Basic#

Pair the checkbox with Field and FieldLabel for proper layout and labeling.

Description#

Use FieldContent and FieldDescription for helper text.

Disabled#

Use the disabled prop to prevent interaction and add the data-disabled attribute to the <Field> component for disabled styles.

Group#

Use multiple fields to create a checkbox list.

Table#

RTL#

To enable RTL support in Force UI, see the RTL configuration guide.

API Reference#

See the Radix UI documentation for more information.