Checkbox

Component

Storybook

Figma Demo

Guidelines

Variants

Checkboxes come in two variants:

• default: Default state of the checkbox.
• standalone: Standalone state of the checkbox, used only for Tables at this time.

Sizes

Checkboxes are offered in two sizes that vary slightly by both type and element size:

• sm: type size: sm, element size: 12px
• base: type size: body, element size: 16px

Usage

• Use the base size in form settings when the other form elements are either base or lg.
• Use the sm size checkbox in tight spaces such as inside dropdown menus or tables.

Best Practices

• Use checkboxes for choices/settings that are then enabled by a CTA.
• Don’t use a checkbox to perform an action.

Component Specs

API

• class: string | Default: undefined
  Extra classes for the label.

• checked: boolean | Default: false
  Checked state of the checkbox.

• count: string | Default: undefined
  The number of items the filter has in context of PLP filters.

• disabled: boolean | Default: false
  Disabled state of the checkbox.

• group: string | Default: undefined
  Group of the checkbox.

• helperText: string | Default: undefined
  Helper text of the checkbox.

• id: string | Default: undefined
  Id of the checkbox.

• indeterminate: boolean | Default: false
  Indeterminate state of the checkbox.

• items: CheckboxItem<unknown>[] | Default: []
  Items of the checkbox.

• label: string | Default: 'Label'
  Label of the checkbox.

• required: boolean | Default: false
  Required state of the checkbox.

• size: 'sm' | 'default' | Default: 'default'
  Size of the checkbox.

• testId: string | Default: undefined
  Test id for testing purposes.

• value: string | Default: undefined
  Value of the checkbox.

• variant: 'default' | 'standalone' | Default: 'default'
  Variant of the checkbox.

Example

<script>
	import { Checkbox } from '@getprovi/craft-svelte';

	let items = [
		{ value: '1', label: 'One' },
		{ value: '2', label: 'Two' },
		{ value: '3', label: 'Three' }
	];

	let group = ['2', '3'];
	let value = false;
</script>

<!-- Individual Checkbox -->
<Checkbox
	id="checkbox-1"
	label="Checkbox"
	{value}
	bind:checked="{value}"
	count="1"
	size="sm"
	helperText="Here is some helper text."
/>

<!-- Group Checkbox -->
<Checkbox bind:group {items} />

Types

type CheckboxItem<T> = {
	value: T;
	label?: string;
	isChecked?: boolean;
};

interface SharedProps extends Omit<HTMLInputAttributes, 'size'> {
	class?: string | null | undefined;
	count?: string | unknown;
	helperText?: string | undefined;
	indeterminate?: boolean;
	label?: string;
	size?: 'sm' | 'default';
	testId?: string | undefined;
}

interface Group extends SharedProps {
	group: HTMLInputAttributes['bind:group'];
	id?: never;
	items: CheckboxItem<unknown>[];
	value?: never;
}

interface Single extends SharedProps {
	checked?: HTMLInputAttributes['checked'];
	group?: never;
	id: HTMLLabelAttributes['for'];
	value: HTMLInputAttributes['value'];
}

interface StandAlone extends Single {
	variant: 'standalone';
	size?: 'sm';
}

type Props = Single | Group | StandAlone;