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

Example

React
Vue

import { useState } from 'react';
// Import component
import { Checkbox } from '@fintech-sandpit/ui/react';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/checkbox.css';

return (
  <Checkbox
    defaultChecked={false}
    disabled={false}
    invalid={false}
    readOnly={false}
    value="accepted"
    colorScheme="neutral"
    size="md"
    variant="solid"
    labelPosition="left"
  >
    Accept terms and conditions
  </Checkbox>
);

<script setup lang="ts">
import { ref } from 'vue';
// Import component
import { Checkbox } from '@fintech-sandpit/ui/vue';
// Import styles (optional)
import '@fintech-sandpit/ui/style/components/checkbox.css';
</script>

<template>
  <Checkbox
    :default-checked="false"
    :disabled="false"
    :invalid="false"
    :read-only="false"
    color-scheme="neutral"
    label-position="left"
    size="md"
    value="accepted"
    variant="solid"
  >
    Accept terms and conditions
  </Checkbox>
</template>

Props

React
Vue

Name	Type	Default	Description
`checked`	`CheckedState`	—	The controlled checked state of the checkbox
`defaultChecked`	`CheckedState`	`false`	The default (uncontrolled) checked state of the checkbox
`form`	`string`	—	The id of the checkbox form
`name`	`string`	—	The name of the input field on the form
`value`	`string`	—	The checkbox value for form submission
`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
`tabIndex`	`number`	—	The tab index of the checkbox hidden input element
`labelPosition`	`LabelPosition`	`left`	The position of the label

Name	Type	Default	Description
`checked`	`CheckedState`	—	The controlled state of the checkbox ¹
`default-checked`	`CheckedState`	`false`	The default (uncontrolled) checked state of the checkbox
`form`	`string`	—	The id of the checkbox form
`name`	`string`	—	The name of the input field on the form
`value`	`string`	—	The checkbox value for form submission
`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
`tab-index`	`number`	—	The tab index of the checkbox hidden input element
`label-position`	`LabelPosition`	`left`	The position of the label

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

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

Name	Payload	Description
`@update:checked`	`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'