Checkbox
Checkbox for binary on/off selection with solid, pill, and ghost variants, an indeterminate state, and rich labels with inline descriptions.
import { Checkbox } from "@plexui/vue/components/Checkbox";Examples
Overview
variant
With Radio Group
direction
description
Descriptions
Variants
Pill
Ghost
With description
Indeterminate
Disabled
Label orientation
orientation
Without label
Group with select all
Group with description
With Field
Grouped sections
API
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "ghost" | "solid" | Visual style: solid (filled background) or ghost (checkmark only) |
pill | boolean | false | Fully rounded indicator corners |
checked / v-model:checked | boolean | "indeterminate" | — | Controlled state |
default-checked | boolean | "indeterminate" | — | Initial state (uncontrolled) |
label | string | — | Accessible label rendered next to the checkbox |
label slot | VNode[] | — | Rich label content; takes precedence over the label prop |
description | string | — | Second line below the label, linked via aria-describedby (or the description slot) |
disabled | boolean | false | Prevent interaction |
required | boolean | — | Required for form submission |
name | string | — | Form field name |
value | string | "on" | Value when submitted |
orientation | "left" | "right" | "left" | Checkbox position relative to the label |
class | string | — | CSS classes applied to the wrapper node |
id | string | — | The id of the checkbox element (generated when omitted) |
@update:checked | (next: boolean | "indeterminate") => void | — | Emitted with the next state when it changes (a click always emits a boolean) |
@focus | (event: FocusEvent) => void | — | Emitted when the checkbox gains focus |
@blur | (event: FocusEvent) => void | — | Emitted when the checkbox loses focus |
Other attributes and listeners land on the checkbox <button>. Built on Reka UI Checkbox. Inside a <form>, a hidden native checkbox mirrors the state so the value is submitted and a form reset restores the initial state.
Styling
Checkbox reads these component tokens. Override them at any scope to restyle it:
--checkbox-indicator-size: indicator size (defaultvar(--radio-group-indicator-size))--checkbox-label-gap: label gap (defaultvar(--radio-group-item-gap))--checkbox-label-line-height: label line height (defaultvar(--radio-group-item-line-height))--input-border-color-invalid: border color invalid (defaultvar(--color-border-danger-outline))