GkCheckbox

Native <input type="checkbox"> with tokenized focus styles, wrapped in an inline-flex container so it aligns with adjacent labels. Pair with a visible <label> or pass ariaLabel.

When to use

Use for binary choices and “select all” controls where each option can be independently toggled.

Live Examples

Basic

Boolean v-model with a visible label.

Accept terms

vue

<script setup lang="ts">
import { GkCheckbox } from 'god-kit/vue'
import { ref } from 'vue'

const ok = ref(false)
</script>

<template>
  <label class="gk-doc-inline">
    <GkCheckbox v-model="ok" />
    <span>Accept terms</span>
  </label>
</template>

<style scoped>
.gk-doc-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--gk-space-2);
  font-family: var(--gk-font-sans);
  font-size: var(--gk-font-size-md);
  color: var(--gk-color-on-surface);
}
</style>

Native value & indeterminate

Optional value attribute; indeterminate is cleared after the user toggles.

With native valueIndeterminate (clears after first toggle)

vue

<script setup lang="ts">
import { GkCheckbox } from 'god-kit/vue'
import { ref } from 'vue'

const ok = ref(false)
const tri = ref(false)
const indeterminate = ref(true)

function onTriUpdate() {
  indeterminate.value = false
}
</script>

<template>
  <div class="gk-doc-stack">
    <label class="gk-doc-inline">
      <GkCheckbox v-model="ok" value="terms" />
      <span>With native <code>value</code></span>
    </label>

    <label class="gk-doc-inline">
      <GkCheckbox
        v-model="tri"
        :indeterminate="indeterminate"
        @update:model-value="onTriUpdate"
      />
      <span>Indeterminate (clears after first toggle)</span>
    </label>
  </div>
</template>

<style scoped>
.gk-doc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gk-space-3);
}

.gk-doc-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--gk-space-2);
  font-family: var(--gk-font-sans);
  font-size: var(--gk-font-size-md);
  color: var(--gk-color-on-surface);
}
</style>

Best practice: Use indeterminate only for partial selection, not as a third persistent state.

Readonly

Readonly prevents toggling while keeping focus styles.

Readonly (cannot toggle)

vue

<script setup lang="ts">
import { GkCheckbox } from 'god-kit/vue'
import { ref } from 'vue'

const locked = ref(false)
</script>

<template>
  <label class="gk-doc-inline">
    <GkCheckbox v-model="locked" readonly />
    <span>Readonly (cannot toggle)</span>
  </label>
</template>

<style scoped>
.gk-doc-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--gk-space-2);
  font-family: var(--gk-font-sans);
  font-size: var(--gk-font-size-md);
  color: var(--gk-color-on-surface);
}
</style>

API

Props

Prop	Type	Default	Description
modelValue	boolean	required	Checked state (v-model)
id	string	—	Overrides injected field id
name	string	—	Form name
value	string	—	Native value attribute (e.g. for named groups)
disabled	boolean	false	Disabled
readonly	boolean	false	Prevents toggling; uses aria-readonly and reverts change (native readonly is not used on checkboxes)
indeterminate	boolean	false	Sets the native indeterminate state (separate from checked)
ariaLabel	string	—	Required when there is no visible label
size	'xs' | 'sm' | 'md' | 'lg' | 'xl'	—	Scales the control and related type size; omit for global defaults

Root class applies to the outer wrapper; other attributes are forwarded to the <input>.

Events

Event	Payload	Description
update:modelValue	boolean	Emitted when the checked state changes
update:focused	boolean	true on focus, false on blur

Expose

Name	Type	Description
input	HTMLInputElement	The native checkbox element

Examples

Each scenario under Live Examples includes a copyable Vue snippet.

Accessibility notes

• Provide visible label text or ariaLabel so each checkbox has a clear accessible name.
• Use indeterminate only to communicate partial selection state, not as a third boolean value.

Related components

• GkRadioGroup & GkRadio
• GkField
• GkSelect