@usevyre/react @usevyre/vue

Checkbox

A styled checkbox input that supports checked, unchecked, indeterminate, and disabled states. Works controlled or uncontrolled.

States

Accept terms and conditions

Indeterminate state

Disabled

import { Checkbox } from "@usevyre/react";

// Uncontrolled
<Checkbox id="terms" defaultChecked />

// Controlled
const [checked, setChecked] = useState(false);
<Checkbox
  id="terms"
  checked={checked}
  onCheckedChange={setChecked}
/>

<script setup>
import { Checkbox } from "@usevyre/vue";
const checked = ref(false);
</script>
<template>
  <!-- Uncontrolled -->
  <Checkbox id="terms" :default-checked="true" />

  <!-- Controlled -->
  <Checkbox id="terms" v-model="checked" />
</template>

Indeterminate

Set indeterminate to show a dash icon. Useful for parent checkboxes in a tree where only some children are selected.

<Checkbox indeterminate defaultChecked />

<Checkbox :indeterminate="true" :default-checked="true" />

Props

Prop	Type	Default	Description
`checked`	`boolean`	`—`	Controlled checked state.
`defaultChecked`	`boolean`	`—`	Initial checked state (uncontrolled).
`indeterminate`	`boolean`	`false`	Shows the indeterminate (dash) icon and sets input.indeterminate.
`disabled`	`boolean`	`false`	Disables the checkbox.
`size`	`"sm" \| "md"`	`"md"`	Checkbox size.
`id`	`string`	`—`	HTML id — link to a <label> for accessibility.
`onCheckedChange`	`(v: boolean) => void`	`—`	React only. Called on change.
`class`	`string`	`—`	Additional CSS class.

AI Context

Valid props

Prop	Values	Default
`size`	`"sm"`\|`"md"`	`md`
`checked`	`true`\|`false`	`false`
`disabled`	`true`\|`false`	`false`
`indeterminate`	`true`\|`false`	`false`

Common AI mistakes

size="lg"→ Use size="md"

Quick examples

Labeled checkbox

<label style={{ display: 'flex', alignItems: 'center', gap: 'var(--vyre-spacing-2)' }}>
  <Checkbox checked={agreed} onChange={e => setAgreed(e.target.checked)} />
  I agree to the terms
</label>

← Card Command →