blue
View on GitHub

Checkbox

A checkbox allows users to select one or multiple 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 Group Checkbox 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 rowGap prop.
  • To change the column gap in the inline CheckboxGroup, use 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

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.

Events