Components / Input controls

Checkbox

Component + manager

Creates a checkbox, toggle, or dark theme switch with optional label, error states, and custom on/off values.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentCheckbox

Managercreate_checkbox_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Checkbox, create_checkbox_manager } from "sveltekit-ui"

  const manager = create_checkbox_manager({
    label: "Email me product updates",
    name: "product_updates",
    val: false,
  })
</script>

<Checkbox {manager} />
<p>Updates {manager.val ? "enabled" : "disabled"}</p>

API reference

Configure the manager, call its methods, and read its reactive state.

19 entries in configuration

Property	Type	Default	Description
`type`	`string`	`checkbox`	the display variant: 'checkbox', 'toggle', or 'dark_theme'
`val`	`any`	`null`	the current value of the checkbox, which can match on_val or off_val
`on_val`	`any`	`true`	the value considered 'checked'
`off_val`	`any`	`false`	the value considered 'unchecked'
`label`	`string`	`null`	label text displayed beside the checkbox
`name`	`string`	`checkbox`	the input name attribute
`color`	`string`	`var(--primary-t)`	the base color for the checked state or toggle
`is_required`	`boolean`	`false`	marks the input as required
`is_read_only`	`boolean`	`false`	makes the checkbox read-only if true
`is_disabled`	`boolean`	`false`	disables the checkbox if true
`is_loading`	`boolean`	`false`	displays a loading spinner if true
`size`	`number`	`2.4`	base size in rem for the checkbox or toggle
`ml`	`number`	`0`	margin-left in rem
`mr`	`number`	`0`	margin-right in rem
`mt`	`number`	`0`	margin-top in rem
`mb`	`number`	`0`	margin-bottom in rem
`error_message`	`string`	`null`	an error message displayed next to the checkbox
`on_change`	`function`	`null`	callback fired when the checkbox toggles, receiving new value
`on_hover_change`	`function`	`null`	callback fired on pointerenter/leave, receiving true or false