Checkbox

Allow users to make binary choices or select multiple options.

Demo

React
Vue

Size

Variant

Color scheme

Invalid

Read only

Disabled

Label position

Label

Accept terms and conditions

Usage

React
Vue

import { useState } from 'react';
import {
  Checkbox,
  type CheckboxState,
} from '@fintech-sandpit/ui/react';

const [value, setValue] = useState<CheckboxState>(false);

return (
  <Checkbox
    value={value}
    onChange={setValue}
  >
    Accept terms and conditions
  </Checkbox>
);

<script setup lang="ts">
import { ref } from 'vue';
import {
  Checkbox,
  type CheckboxState,
} from '@fintech-sandpit/ui/vue';

const value = ref<CheckboxState>(false);
</script>

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

Props

React
Vue

Name	Type	Default	Description
`value`	`CheckedState`	`false`	The controlled state of the checkbox
`defaultValue`	`CheckedState`	`false`	The default (uncontrolled) checked state of the checkbox
`colorScheme`	`ColorScheme`	`neutral`	The checkbox color scheme
`size`	`Size`	`md`	The checkbox size
`variant`	`CheckboxVariant`	`solid`	The checkbox variant
`disabled`	`boolean`	`false`	Whether the checkbox is disabled
`invalid`	`boolean`	`false`	Whether the checkbox is invalid
`readOnly`	`boolean`	`false`	Whether the checkbox is read-only
`labelPosition`	`LabelPosition`	`left`	The position of the label

Name	Type	Default	Description
`model-value`	`CheckedState`	`false`	The controlled state of the checkbox ¹
`default-value`	`CheckedState`	`false`	The default (uncontrolled) checked state of the checkbox
`color-scheme`	`ColorScheme`	`neutral`	The checkbox color scheme
`size`	`Size`	`md`	The checkbox size
`variant`	`CheckboxVariant`	`solid`	The checkbox variant
`disabled`	`boolean`	`false`	Whether the checkbox is disabled
`invalid`	`boolean`	`false`	Whether the checkbox is invalid
`read-only`	`boolean`	`false`	Whether the checkbox is read-only
`label-position`	`LabelPosition`	`left`	The position of the label

Can be used with the v-model directive for two-way binding.

Name	Type	Description
`onChange`	`(value: CheckedState) => void`	Callback fired when the checked state changes

Name	Payload	Description
`@update:model-value`	`CheckedState`	Event emitted when the checked state changes

Types

type CheckboxVariant = 'solid' | 'subtle' | 'outline'
type CheckedState = boolean | 'indeterminate'
type ColorScheme = 'neutral' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger'
type LabelPosition = 'left' | 'right'
type Size = 'xs' | 'sm' | 'md' | 'lg'