blue
View on GitHub

Checkbox

A checkbox allows users to select one or more options from a set.

Usage

Light
Blue
Zoho Puvi 
<script>
	import { Checkbox } from 'deskblocks';
	let termsAgreed = false;
</script>

<Checkbox value="48" checked={termsAgreed}>Label</Checkbox>

Checkbox group

The CheckboxGroup allows users to select multiple options, binding the selections to a shared array.

Light
Blue
Zoho Puvi 
<script>
	import { Checkbox, CheckboxGroup } from 'deskblocks';
	let falvours = ['vanilla', 'pista'];
</script>

<CheckboxGroup bind:group={falvours}>
	<Checkbox value="vanilla">Vanilla</Checkbox>
	<Checkbox value="strawberry">Strawberry</Checkbox>
	<Checkbox value="pista">Pista</Checkbox>
</CheckboxGroup>

Inline checkbox group

Light
Blue
Zoho Puvi 
<CheckboxGroup inline bind:group={falvours}>
	<Checkbox value="vanilla">Vanilla</Checkbox>
	<Checkbox value="strawberry">Strawberry</Checkbox>
	<Checkbox value="pista">Pista</Checkbox>
</CheckboxGroup>

Tips:

  • It is recommended to use the name prop on the “CheckboxGroup” instead of individual “Checkbox” components.
  • To change the row gap in the CheckboxGroup, use the rowGap prop.
  • To change the column gap in the inline CheckboxGroup, use the columnGap prop.

Disabled state

Light
Blue
Zoho Puvi 
<Checkbox disabled value="48">Label</Checkbox>
<Checkbox disabled checked value="48">Label</Checkbox>

Slots

Checkbox props

id string undefined Specifies a unique identifier for the checkbox.
name string undefined Assigns a name to the checkbox, useful for form submissions.
value string undefined Sets the value associated with the checkbox.
disabled boolean false Disables the checkbox, preventing user interaction.
checked boolean false Determines whether the checkbox is checked by default.
required boolean false Indicates that the checkbox must be checked before form submission.
class string undefined Custom CSS class name for additional styling.

CheckboxGroup props

name string undefined Assigns a shared name to every checkbox in the group, useful for form submissions.
group string[] [] Binds the values of the checked checkboxes to an array.
inline boolean false Displays the checkboxes in a horizontal row if set to true .
rowGap CSS length unit 0.25rem Defines the vertical spacing between rows of checkboxes.
columnGap CSS length unit 1rem Defines the horizontal spacing between checkboxes in a row.
class string undefined Custom CSS class name for additional styling.

Events