Checkbox ​

Allows users to select or deselect an option, commonly used in forms and settings where multiple choices are available.

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Checkbox } from 'frappe-ui'

const value = ref(false)
</script>

<template>
  <Checkbox v-model="value" label="Accept terms and conditions" />
</template>

Sizes ​

vue
<script setup lang="ts">
import { Checkbox } from 'frappe-ui'
</script>

<template>
  <div class="flex flex-col gap-3 items-start">
    <Checkbox size="sm" label="Small" />
    <Checkbox size="md" label="Medium" />
  </div>
</template>

Labeling ​

label, description, error, and required are wired into the underlying input via the shared labeling contract. Description and error stack below the row, indented under the label region.

Required to continue.

vue
<script setup lang="ts">
import { computed, ref } from 'vue'
import { Checkbox } from 'frappe-ui'

const accepted = ref(false)
const required = ref(true)
const showError = ref(false)

const error = computed(() =>
  showError.value ? 'You must accept the terms.' : '',
)
</script>

<template>
  <div class="flex gap-8 items-start">
    <Checkbox
      v-model="accepted"
      label="Accept terms"
      description="Required to continue."
      :error="error"
      :required="required"
    />
    <div
      class="flex flex-col gap-2 items-start border-l border-outline-gray-2 pl-6"
    >
      <Checkbox v-model="required" label="required" />
      <Checkbox v-model="showError" label="show error" />
    </div>
  </div>
</template>

States ​

vue
<script setup lang="ts">
import { Checkbox } from 'frappe-ui'
</script>

<template>
  <div class="flex flex-col gap-3 items-start">
    <Checkbox label="Default" />
    <Checkbox label="Required" required />
    <Checkbox label="Disabled" disabled />
    <Checkbox label="With error" error="Required to continue." />
  </div>
</template>

API Reference ​

Show types
typescript
import type { ToggleSize } from '../../composables/inputTypes'
import type { InputLabelingProps } from '../../composables/useInputLabeling'

export interface CheckboxProps extends InputLabelingProps {
  /** Controls the size of the checkbox */
  size?: ToggleSize

  /** Disables the checkbox interaction */
  disabled?: boolean

  /**
   * Adds padding around the checkbox.
   * @deprecated Use `data-*` styling hooks instead.
   */
  padding?: boolean

  /** Checked state of the checkbox. `boolean` is canonical; `1`/`0` are kept for v1 backwards compatibility. */
  modelValue?: boolean | 1 | 0
}

export interface CheckboxEmits {
  /** Fired when the checkbox value changes. */
  'update:modelValue': [value: boolean]
}
size
= "sm"
ToggleSize

Controls the size of the checkbox

disabled
boolean

Disables the checkbox interaction

padding
= false

Deprecated — Use `data-*` styling hooks instead.

modelValue
boolean | 0 | 1

Checked state of the checkbox. `boolean` is canonical; `1`/`0` are kept for v1 backwards compatibility.

label
string

Label rendered above (or beside, for binary controls) the input.

description
string

Helper text rendered below the input. Hidden when `error` is set.

error
string | FrappeUIError

Error message rendered below the input. When set, the control receives `aria-invalid="true"` and `data-state="invalid"`. May be either a string or an `Error` object whose `messages?: string[]` is rendered as stacked lines (with `Error.message` as the fallback).

required
boolean

Marks the field as required. Renders an asterisk next to the label and forwards `required` / `aria-required` to the underlying control.

id
string

HTML id of the underlying control. Auto-generated via `useId()` if omitted.

label
{ required: boolean; }

Overrides the rendered label content. Receives `{ required }`.

description
—

Overrides the rendered description content.

update:modelValue
unknown[]

Fired when the model value changes.

ChartsCombobox