CheckboxField — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download checkbox-field -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { CheckboxField } from "@/components/ui/checkbox-field";

const args = {
  "position": "prefix",
  "disabled": false,
} satisfies Partial<
  InstanceType<typeof CheckboxField> extends { $props: infer Props }
    ? Props
    : {}
> &
  Record<string, unknown> & { position?: "prefix" | "suffix" };
</script>

<template>
  <CheckboxField :position="args.position" :disabled="args.disabled"
    >Accept terms</CheckboxField
  >
</template>

Examples

Default

<script setup lang="ts">
import { ref } from "vue";
import { CheckboxField } from "@/components/ui/checkbox-field";

const args = {
  "position": "prefix",
  "disabled": false,
  "bottom": "",
} satisfies Partial<
  InstanceType<typeof CheckboxField> extends { $props: infer Props }
    ? Props
    : {}
> &
  Record<string, unknown> & { position?: "prefix" | "suffix" };
const value = ref(false);
</script>

<template>
  <CheckboxField v-bind="args">
    Label here
    <template v-if="args.bottom" v-slot:bottom>
      {{ args.bottom }}
    </template>
  </CheckboxField>
</template>

Suffix

<script setup lang="ts">
import { CheckboxField } from "@/components/ui/checkbox-field";

const args = {

} satisfies Partial<
  InstanceType<typeof CheckboxField> extends { $props: infer Props }
    ? Props
    : {}
> &
  Record<string, unknown>;
</script>

<template>
  <CheckboxField position="suffix">Accept terms</CheckboxField>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`modelValue`	`boolean`	`—`
`position`	`"prefix" \| "suffix"`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.