component

Checkbox

Checkbox component to allow the user to select one or more options in the form of a square box available in multiple sizes and colors

Set Up #

To use the Checkbox component, import it in the script tag:

<script>
	import { Checkbox } from '@sans-ui/core';
</script>

Usage #

The Checkbox component allows users to select one or more options in the form of a square box. It is available in multiple styles, sizes, colors, and variants.

<script>
	import { Checkbox } from '@sans-ui/core';
</script>

<Checkbox />

Variant #

The variant prop lets you customize the color theme of the Checkbox:

<script>
	import { Checkbox } from '@sans-ui/core';
</script>

<Checkbox checked variant="primary" />
<Checkbox checked variant="secondary" />
<Checkbox checked variant="success" />
<Checkbox checked variant="warning" />
<Checkbox checked variant="danger" />

Size #

Use the size prop to adjust the size of the Checkbox:

<script>
	import { Checkbox } from '@sans-ui/core';
</script>

<div class="flex flex-row gap-2">
	<Checkbox size="sm" />
	<Checkbox size="md" />
	<Checkbox size="lg" />
</div>

Disabled #

The disabled prop disables the Checkbox:

<script>
	import { Checkbox } from '@sans-ui/core';
</script>

<Checkbox checked disabled />

Default Checked #

Set the initial check state using the checked prop:

<script>
	import { Checkbox } from '@sans-ui/core';
</script>

<Checkbox checked />

Indeterminate #

Use the indeterminate prop to set the Checkbox to an indeterminate state:

<script>
	import { Checkbox } from '@sans-ui/core';
</script>

<Checkbox indeterminate />

Animation #

Control the Checkbox animation using the animation prop:

<script>
	import { Checkbox } from '@sans-ui/core';
</script>

<Checkbox animation={false} />

Accessibility #

• Built with native HTML input elements.
• Full support for browser features like form autofill.
• Keyboard event support for "Tab" and "Space" keys.
• Labeling support for assistive technology.
• Indeterminate state support.

API #

Checkbox provides APIs(Properties) that is necessary for you to configure a Checkbox compponent.

Checkbox Props #

Checkbox Handlers #

Checkbox Slots #