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 🔗 optional
Description	Prevent interactivity and gray out the control.
Type	`boolean`
Default	`false`

label 🔗 optional
Description	Text displayed next to control.
Type	`string`
Default	`undefined`

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 🔗 bindablerequired
Description	The value to control.
Type	`boolean`

Events

🔗

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`

Checkbox

Example

Demo

Code

Props

disabled

label

theme

value

Events

change