Checkbox

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { Checkbox } from "@line/abc-def-react/checkbox";

<script setup lang="ts">
import { Checkbox } from "@line/abc-def-vue/checkbox";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

Basic usage

import { Checkbox } from "@line/abc-def-react/checkbox";
import { Label } from "@line/abc-def-react/label";

export function Example() {
  return (
    <div className="flex items-center gap-2">
      <Checkbox id="release" defaultChecked />
      <Label htmlFor="release">Include release notes</Label>
    </div>
  );
}

<script setup lang="ts">
import { Checkbox } from "@line/abc-def-vue/checkbox";
import { Field, FieldLabel } from "@line/abc-def-vue/field";
</script>

<template>
  <Field orientation="horizontal">
    <Checkbox id="release" default-checked />
    <FieldLabel html-for="release">Include release notes</FieldLabel>
  </Field>
</template>

Component tokens

Composition exports

Usage notes

• Use with a visible label.
• Use radio buttons when exactly one option must be selected.
• Related component tokens use the `checkbox` token group in `@line/abc-def-styles/css`.