Checkbox

Neobrutalist-styled checkbox built on reka-ui's CheckboxRoot primitive, with a check indicator.

Demo

Preview

默认

主要

危险

不确定状态（Minus 图标）

自定义 aria-label

Installation

pnpm dlx brutx-vue@latest add checkbox

Usage

<script setup>
import { ref } from 'vue'
import { Checkbox } from 'brutx-ui-vue'

const checked = ref(false)
</script>

<template>
    <div class="flex items-center gap-3">
        <Checkbox v-model:checked="checked" />
        <span class="text-sm font-bold">Accept terms</span>
    </div>
</template>

Variants

Variant	Description
default	Default background, standard foreground
primary	Primary (coral) background
secondary	Secondary (mint) background
accent	Accent (yellow) background
danger	Danger (red) background

<template>
    <Checkbox variant="primary" />
</template>

Sizes

Size	Description
sm	Small
default	Default
lg	Large

With Label

<script setup>
import { ref } from 'vue'
import { Checkbox, Label } from 'brutx-ui-vue'

const checked = ref(false)
</script>

<template>
    <div class="flex items-center gap-3">
        <Checkbox v-model:checked="checked" id="terms" />
        <Label for="terms">Accept terms and conditions</Label>
    </div>
</template>

Disabled State

<script setup>
import { Checkbox } from 'brutx-ui-vue'
</script>

<template>
    <Checkbox disabled />
</template>

Indeterminate State

Set checked to 'indeterminate' to display the indeterminate state. The indicator shows a Minus icon, commonly used for "partially selected" hierarchical selection scenarios.

Uncontrolled mode supports it too: <Checkbox defaultValue="indeterminate" /> initially renders the Minus icon with aria-checked="mixed". Per reka-ui semantics, clicking switches the state to checked — it does not return to indeterminate automatically.

<script setup>
import { Checkbox } from 'brutx-ui-vue'
</script>

<template>
    <Checkbox :checked="'indeterminate'" />
</template>

API Reference

Checkbox — Props

Name	Type	Default	Description
class	string | undefined	undefined	CSS classes added to the checkbox root interactive element.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/checkbox/Checkbox.vue Resolved value undefined Source Checkbox.vue:14 packages/ui/src/components/checkbox/Checkbox.vue
checked	boolean | "indeterminate" | undefined	undefined	The controlled checked state: checked, unchecked, or indeterminate. When omitted, the component maintains its own state.
Details Declared type boolean | "indeterminate" | undefined Literal values "indeterminate" false true Default value details Declaration undefined Source: packages/ui/src/components/checkbox/Checkbox.vue Resolved value undefined Source Checkbox.vue:15 packages/ui/src/components/checkbox/Checkbox.vue
defaultValue	boolean | "indeterminate" | undefined	undefined	The initial state in uncontrolled mode; it only applies when checked is not set.
Details Declared type boolean | "indeterminate" | undefined Literal values "indeterminate" false true Default value details Declaration undefined Source: packages/ui/src/components/checkbox/Checkbox.vue Resolved value undefined Source Checkbox.vue:20 packages/ui/src/components/checkbox/Checkbox.vue
disabled	boolean | undefined	false	Disables checkbox interaction and passes the disabled state to the underlying Reka UI primitive.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/checkbox/Checkbox.vue Resolved value false Source Checkbox.vue:21 packages/ui/src/components/checkbox/Checkbox.vue
variant	"accent" | "danger" | "default" | "primary" | "secondary" | undefined	"default"	Selects the checkbox color style variant.
Details Declared type NonNullable<"default" | "primary" | "secondary" | "danger" | "accent" | null | undefined> | undefined Literal values "accent" "danger" "default" "primary" "secondary" Default value details Declaration 'default' Source: packages/ui/src/components/checkbox/Checkbox.vue Resolved value "default" Source Checkbox.vue:22 packages/ui/src/components/checkbox/Checkbox.vue
size	"default" | "lg" | "sm" | undefined	"default"	Sets the size of the checkbox and its state icon.
Details Declared type NonNullable<"default" | "lg" | "sm" | null | undefined> | undefined Literal values "default" "lg" "sm" Default value details Declaration 'default' Source: packages/ui/src/components/checkbox/Checkbox.vue Resolved value "default" Source Checkbox.vue:23 packages/ui/src/components/checkbox/Checkbox.vue
ariaLabel	string | undefined	undefined	The checkbox accessible name; localized default text is used when omitted.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/checkbox/Checkbox.vue Resolved value undefined Source Checkbox.vue:25 packages/ui/src/components/checkbox/Checkbox.vue
name	string | undefined	undefined	The native form field name. When set, the checkbox value is submitted with its form.
Details Declared type string | undefined Default value details Declaration undefined Source: packages/ui/src/components/checkbox/Checkbox.vue Resolved value undefined Source Checkbox.vue:27 packages/ui/src/components/checkbox/Checkbox.vue
value Nullable	AcceptableValue | undefined	undefined	The value submitted with the form. It is forwarded to the Reka UI root primitive, whose native default is on when omitted.
Details Declared type AcceptableValue | undefined Literal values null Default value details Declaration undefined Source: packages/ui/src/components/checkbox/Checkbox.vue Resolved value undefined Source Checkbox.vue:29 packages/ui/src/components/checkbox/Checkbox.vue
required	boolean | undefined	false	Sets the native form required state and passes it to the underlying primitive.
Details Declared type boolean | undefined Literal values false true Default value details Declaration false Source: packages/ui/src/components/checkbox/Checkbox.vue Resolved value false Source Checkbox.vue:31 packages/ui/src/components/checkbox/Checkbox.vue

Checkbox — Events

Name	Signature or type	Description
@update:checked	[value: boolean | "indeterminate"]	Emits the new boolean or indeterminate state when it changes; supports v-model:checked.
Details Declared type [value: boolean | "indeterminate"] Literal values "indeterminate" false true Source Checkbox.vue packages/ui/src/components/checkbox/Checkbox.vue

Accessibility

• Keyboard: Supports Space key to toggle checked state
• ARIA attributes: Checkbox provides aria-label via locale by default. Falls back to t('checkbox.check') when not provided. Can be omitted when adjacent visible text already describes the purpose; otherwise, provide a more specific description via ariaLabel
• Focus management: Uses --brutal-ring token for visible focus ring

<script setup>
import { ref } from 'vue'
import { Checkbox, Label } from 'brutx-ui-vue'

const checked = ref(false)
</script>

<template>
    <div class="flex items-center gap-3">
        <Checkbox v-model:checked="checked" id="marketing" ariaLabel="Receive marketing emails" />
        <Label for="marketing">Receive marketing emails</Label>
    </div>
</template>