Skip to content

Control Components

Checkbox

A checkbox.

Wraps Tweakpane's boolean input binding.

Usage outside of a <Pane> component will implicitly wrap the checkbox in <Pane position="inline">.

Example

Demo

Enabled: false

Code

<script lang="ts">
  import { Checkbox } from 'svelte-tweakpane-ui'

  let reticulationEnabled: boolean = false
</script>

<Checkbox bind:value={reticulationEnabled} label="Reticulation" />
<pre>Enabled: {reticulationEnabled}</pre>

Props

disabled Section titled “disabled” optional
Description	Prevent interactivity and gray out the control.
Type	`boolean`
Default	`false`

label Section titled “label” optional
Description	Text displayed next to control.
Type	`string`
Default	`undefined`

theme Section titled “theme” optional
Description	Custom color scheme.
Type	`Theme`
Default	`undefined` Inherits default Tweakpane theme equivalent to `ThemeUtils.presets.standard`, or the theme set with `setGlobalDefaultTheme()`.

value Section titled “value” bindablerequired
Description	The value to control.
Type	`boolean`

Events

change Section titled “change”
Description	Fires when `value` changes. This event is provided for advanced use cases. It's usually preferred to bind to the `value` prop instead. The `event.details` payload includes a copy of the value and an `origin` field to distinguish between user-interactive changes (`internal`) and changes resulting from programmatic manipulation of the `value` (`external`).
Extends	`ValueChangeEvent`
Type	`CheckboxChangeEvent`