Checkbox

Checkbox toggles a boolean. Checked and mixed states use brand fill with a dark check or minus.

Demos

Basic

Bind checked and listen for change with e.detail.checked.

I agree

<!-- host: const agree = ref(false); function onAgree(e: CustomEvent<{ checked: boolean }>) { agree.value = e.detail.checked } -->
<gk-checkbox :checked="agree" @change="onAgree">I agree</gk-checkbox>

Size

Size enum matches Button and Input: sm, md, lg.

SmallMediumLarge

<gk-checkbox size="sm" checked>Small</gk-checkbox>
<gk-checkbox size="md" checked>Medium</gk-checkbox>
<gk-checkbox size="lg" checked>Large</gk-checkbox>

Disabled

disabled blocks toggling.

OffOn

<gk-checkbox disabled>Off</gk-checkbox>
<gk-checkbox disabled checked>On</gk-checkbox>

Indeterminate

indeterminate sets aria-checked="mixed" and shows a minus. Clicking checks the box and clears mixed.

Select all

<gk-checkbox :checked="mixedChecked" :indeterminate="mixed" @change="onMixed">Select all</gk-checkbox>

Group

gk-checkbox-group emits change with e.detail.value as string[]. Child checkbox events are stopped so Vue bindings on the group stay correct.

ApplePearPlum

pear

<gk-checkbox-group :value="group" @change="onGroup">
  <gk-checkbox value="apple">Apple</gk-checkbox>
  <gk-checkbox value="pear">Pear</gk-checkbox>
  <gk-checkbox value="plum">Plum</gk-checkbox>
</gk-checkbox-group>

API

Checkbox Props

Prop	Type	Default
checked	boolean	false
indeterminate	boolean	false
disabled	boolean	false
size	'sm' | 'md' | 'lg'	'md'
value	string	''

Checkbox Events

Name	Description
change	User toggled; detail: { checked: boolean }

CheckboxGroup Props

Prop	Type	Default
value	string[]	[]
disabled	boolean	false
size	'sm' | 'md' | 'lg'	'md'

CheckboxGroup Events

Name	Description
change	detail: { value: string[] }