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 ​

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.

States ​

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]
}
Prop Default Type
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.

Slot Payload
label
{ required: boolean; }

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

description
—

Overrides the rendered description content.

Event Payload
update:modelValue
unknown[]

Fired when the model value changes.

ChartsCombobox