Checkbox

A control that allows the user to toggle between checked and not checked.

Accept terms and conditions.

TailwindCSSCSS

<script setup lang="ts">
import { ref } from 'vue'
import { CheckboxIndicator, CheckboxRoot } from '@oku-ui/primitives'
import { Icon } from '@iconify/vue'

const checkboxOne = ref(true)
</script>

<template>
  <div class="flex flex-col gap-2.5">
    <label class="flex flex-row gap-4 items-center [&>.checkbox]:hover:bg-neutral-100">
      <CheckboxRoot
        v-model:checked="checkboxOne"
        class="shadow-blackA7 hover:bg-indigo3 flex h-[25px] w-[25px] appearance-none items-center justify-center rounded-[4px] bg-white shadow-[0_2px_10px] outline-none focus-within:shadow-[0_0_0_2px_black]"
      >
        <CheckboxIndicator class="bg-white h-full w-full rounded flex items-center justify-center">
          <Icon
            icon="radix-icons:check"
            class="h-3.5 w-3.5 text-mauve12"
          />
        </CheckboxIndicator>
      </CheckboxRoot>
      <span class="select-none text-white">Accept terms and conditions.</span>
    </label>
  </div>
</template>

Features

• Supports indeterminate state.
• Full keyboard navigation.
• Can be controlled or uncontrolled.

Installation

Install the component from your command line.

$ npm add @oku-ui/primitives

Anatomy

Import all parts and piece them together.

<script setup>
import { CheckboxIndicator, CheckboxRoot } from '@oku-ui/primitives'
</script>

<template>
  <CheckboxRoot>
    <CheckboxIndicator />
  </CheckboxRoot>
</template>

API Reference

Root

Contains all the parts of a checkbox. An input will also render when used within a form to ensure events propagate correctly.

Prop	Default	Type
as	'div'	object | AsTag
checked		false | true | 'indeterminate'
defaultChecked		false | true | 'indeterminate'
disabled		boolean
name		string
required		boolean
value		string

Emit	Payload
update:checked	[value: CheckedState]

Data Attribute	Value
[data-state]	"checked" | "unchecked" | "indeterminate"
[data-disabled]	Present when disabled

Indicator

Renders when the checkbox is in a checked or indeterminate state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

Prop	Default	Type
as	'div'	object | AsTag
forceMount		boolean Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

Data Attribute	Value
[data-state]	"checked" | "unchecked" | "indeterminate"
[data-disabled]	Present when disabled

Examples

Indeterminate

You can set the checkbox to indeterminate by taking control of its state.

<script setup>
import { Icon } from '@iconify/vue'
import { CheckboxIndicator, CheckboxRoot } from '@oku-ui/primitives'

const checked = ref('indeterminate')
</script>

<template>
  <CheckboxRoot v-model:checked="checked">
    <CheckboxIndicator>
      <Icon
        v-if="checked === 'indeterminate'"
        icon="radix-icons:divider-horizontal"
      />
      <Icon
        v-if="checked"
        icon="radix-icons:check"
      />
    </CheckboxIndicator>
  </CheckboxRoot>

  <button
    type="button"
    @click="() => (checked === 'indeterminate' ? (checked = false) : (checked = 'indeterminate'))"
  >
    Toggle indeterminate
  </button>
</template>

Accessibility

Adheres to the tri-state Checkbox WAI-ARIA design pattern.

Keyboard Interactions

Key	Description
Space	Checks/unchecks the checkbox