Menu
Documentation
v4.0.0-beta.4

Checkbox

<BaseCheckbox /> · A simple checkbox component.

View SourceOpen Issue
vue
<template>
  <BaseCheckboxGroup v-model="value">
    <BaseCheckbox
      label="Option 1"
      value="Option 1"
    />
    <BaseCheckbox
      label="Option 2"
      value="Option 2"
    />
    <BaseCheckbox
      value="Option 3"
      label="Option 3"
    />
  </BaseCheckboxGroup>
</template>

<script setup lang="ts">
const value = ref('Option 1')
</script>

Features

  • Full keyboard navigation
  • Supports horizontal/vertical orientation
  • Can be controlled or uncontrolled

Anatomy

The Group component is a container for the Checkbox components. The Checkbox component is a simple checkbox button.

vue
<template>
  <BaseCheckboxGroup>
    <BaseCheckbox />
    <BaseCheckbox />
    <BaseCheckbox />
  </BaseCheckboxGroup>
</template>

API Reference

This component has props that you can use to modify its visual style.

Group

Model Type
model-value
AcceptableValue[]

The controlled value of the checkbox. Can be binded with v-model.

Prop Type
items
default:[]
BaseCheckboxProps[]
default-value
default:-
AcceptableValue[]

The value of the checkbox when it is initially rendered. Use when you do not need to control its value.

roving-focus
default:-
boolean

When `false`, navigating through the items using arrow keys will be disabled.

disabled
default:-
boolean

When `true`, prevents the user from interacting with the checkboxes

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

dir
default:-
Direction_2

The direction of navigation between items.

orientation
default:-
Orientation

The orientation of the group. Mainly so arrow navigation is done accordingly (left & right vs. up & down)

loop
default:-
boolean

Whether keyboard navigation should loop around

name
default:-
string

The name of the field. Submitted with its owning form as part of a name/value pair.

required
default:-
boolean

When `true`, indicates that the user must set the value before the owning form can be submitted.

Slot Type
#default
any

Checkbox

Model Type
model-value
boolean | "indeterminate" | null

The controlled value of the checkbox. Can be binded with v-model.

Prop Type
label
default:-
string

The label to display for the checkbox.

variant
default:"default"
"default" | "none" | "primary" | "dark"

The variant of the checkbox.

classes
default:{}
{ root?: string | string[]; icon?: string | string[]; indicator?: string | string[]; label?: string | string[]; labelWrapper?: string | string[]; }

Optional classes to pass to the inner components.

default-value
default:-
boolean | "indeterminate"

The value of the checkbox when it is initially rendered. Use when you do not need to control its value.

disabled
default:-
boolean

When `true`, prevents the user from interacting with the checkbox

value
default:-
AcceptableValue

The value given as data when submitted with a `name`.

id
default:-
string

Id of the element

as-child
default:-
boolean

Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.

as
default:-
AsTag | Component

The element or component this component should render as. Can be overwritten by `asChild`.

name
default:-
string

The name of the field. Submitted with its owning form as part of a name/value pair.

required
default:-
boolean

When `true`, indicates that the user must set the value before the owning form can be submitted.

Slot Type
#default
any

Examples

Variants

Use the variant prop to change the color of the radio.

vue
<template>
  <BaseCheckbox
    v-model="value"
    label="Option 2"
    variant="primary"
  />
</template>

<script setup lang="ts">
const value = ref(true)
</script>

Custom variants

Set the variant prop to none and use tailwind classes to customize the radio.

vue
<template>
  <BaseCheckbox
    v-model="value"
    label="Option 2"
    variant="none"
    class="bg-amber-500/10 dark:bg-amber-500/20 border-1 border-muted-300 dark:border-muted-700 text-amber-700 dark:text-amber-400"
  />
</template>

<script setup lang="ts">
const value = ref(true)
</script>

Multiple selection

Use BaseCheckboxGroup to create a group of checkboxes. Bond it to a v-model to control the selected values.

vue
<template>
  <BaseCheckboxGroup v-model="multipleValue" class="p-4 grid grid-cols-2 gap-6 md:max-w-lg md:grid-cols-4">
    <BaseCheckbox
      name="multiple-demo-1"
      label="Option 1"
      value="Option 1"
    />
    <BaseCheckbox
      name="multiple-demo-2"
      label="Option 2"
      value="Option 2"
    />
    <BaseCheckbox
      name="multiple-demo-3"
      label="Option 3"
      value="Option 3"
    />
    <BaseCheckbox
      name="multiple-demo-4"
      label="Option 4"
      value="Option 4"
    />
  </BaseCheckboxGroup>
</template>

<script setup lang="ts">
const value = ref(true)
</script>

Disabled

Use the disabled prop to disable the checkbox.

vue
<template>
  <BaseCheckbox
    v-model="value"
    label="Option 2"
    disabled
  />
</template>

<script setup lang="ts">
const value = ref(true)
</script>

Card

Chip