@isoftdata/svelte-checkbox

Svelte Checkbox

Checkbox and radio button components for Svelte 5

If you want to create a group of radio buttons with arbitrary options, see here for RadioButtonGroup docs.

Install

pnpm i @isoftdata/svelte-checkbox

Breaking changes

2.0.0

• Require Svelte 5
• Slots -> Snippets
• Events -> Callbacks

Props

Name	Type	Description	Default Value
btnGroupClass	string	Any additional classes to apply to the radio buttons' div.btn-group	""
checked	boolean	The checked state of the checkbox.	false
disabled	boolean	Whether to disable the checkbox	false
falseLabel	string	The label for the "false" button when type="radio"	'No'
falseIcon	string	The icon shown on the false button	undefined
id	string	The id of the input	(defaults to a uuid generated at runtime)
indeterminate	boolean	The indeterminate property on the input checkbox element	false
inline	boolean	Whether the label and input's parent div should have the Bootstrap form-check-inline class applied.
label	string	The label to be show to the user for the checkbox	''
labelClass	string	Any classes to add to the label	''
name	string	Passed to the input when type="checkbox"
radioButtonColor	"primary" | "secondary" | "success" | "danger" | "warning" | "info" | "light" | "dark"	The buttons' color when type="radio"
required	boolean	Whether the checkbox is required. For checkbox/switch types, the checkbox must be checked. For radio, either radio button must be checked (which is always true).	false
showLabel	boolean	Whether to show the label	true
title	string	title attribute for the input element. Browsers treat this like a tooltip	''
trueLabel	string	The label for the "true" button when type="radio"	'Yes'
trueIcon	string	The icon shown on the true button	undefined
type	"checkbox" | "radio" | "switch"	How to display the checkbox.	"checkbox"

Callbacks

• change - Fired when the checkbox is checked or unchecked

In radio mode, use event.target.value instead of event.target.checked, as checked will always be true for the clicked radio button.

Example

<script lang="ts">
	import Checkbox from '@isoftdata/svelte-checkbox'

	let isTheCheckboxChecked = false
</script>

<Checkbox
	label="Checkbox!"
	bind:checked={isTheCheckboxChecked}
/>