Checkbox

Styled checkbox with label, error states, and indeterminate support.

uiforminteractive

Installation

Copy the component file into your project's src/lib/components/ directory.

templates/Checkbox.svelte

Usage

<script>
  import Checkbox from '$lib/components/Checkbox.svelte';

  let accepted = $state(false);
  let notifications = $state(true);
  let newsletter = $state(false);
  let indeterminateState = $state(true);
</script>

<!-- Basic checkbox -->
<Checkbox
  bind:checked={accepted}
  label="I accept the terms and conditions"
/>

<!-- Checkbox with helper text -->
<Checkbox
  bind:checked={notifications}
  label="Enable notifications"
  helperText="Receive email updates about your account"
/>

<!-- Required checkbox with error -->
<Checkbox
  bind:checked={accepted}
  label="Accept terms"
  required
  error={!accepted ? 'You must accept the terms to continue' : ''}
/>

<!-- Disabled checkbox -->
<Checkbox
  checked={true}
  label="This option is always enabled"
  disabled
/>

<!-- Checkbox without label (icon only) -->
<Checkbox
  bind:checked={newsletter}
/>

<!-- Indeterminate checkbox (useful for "select all" functionality) -->
<Checkbox
  bind:checked={notifications}
  indeterminate={indeterminateState}
  label="Select all notifications"
/>

Props

Prop	Type	Default	Description
checked	boolean	false	Whether the checkbox is checked (bindable)
label	string	''	Label text displayed next to the checkbox
disabled	boolean	false	Whether the checkbox is disabled
required	boolean	false	Whether the checkbox is required (adds asterisk to label)
error	string	''	Error message to display below checkbox
helperText	string	''	Helper text displayed below checkbox when no error
id	string	''	Checkbox id attribute (auto-generated if not provided)
name	string	''	Checkbox name attribute for form submission
value	string	''	Checkbox value attribute (useful in checkbox groups)
indeterminate	boolean	false	Whether the checkbox is in an indeterminate state (partially checked)
class	string	''	Additional CSS classes for the checkbox wrapper

Files

Checkbox.svelte