CheckboxInput

A Material Design 3 styled checkbox with ripple effect and voice control support in smrt mode. Perfect for boolean options, terms acceptance, and feature toggles.

Installation

typescript

import { CheckboxInput } from '@happyvertical/smrt-svelte';

Basic Usage

A simple checkbox with a label and bindable checked state.

I accept the terms and conditions

svelte

<script lang="ts">
  let checked = $state(false);
</script>

<CheckboxInput
  name="terms"
  label="I accept the terms and conditions"
  bind:checked
/>

Default Checked

Set checked to true for an initially checked state.

Subscribe to newsletter

svelte

<CheckboxInput
  name="newsletter"
  label="Subscribe to newsletter"
  checked={true}
/>

Required Field

Add required to mark the checkbox as required (shows an asterisk).

I have read and agree to the Privacy Policy*

svelte

<CheckboxInput
  name="privacy"
  label="I have read and agree to the Privacy Policy"
  required
/>

Disabled State

Use disabled to prevent user interaction.

Disabled unchecked

Disabled checked

svelte

<CheckboxInput
  name="disabled-unchecked"
  label="Disabled unchecked"
  disabled
/>
<CheckboxInput
  name="disabled-checked"
  label="Disabled checked"
  checked={true}
  disabled
/>

With Description

Add a description for voice extraction context in smrt mode.

Enable marketing emails

svelte

<CheckboxInput
  name="marketing"
  label="Enable marketing emails"
  description="Yes or no for receiving marketing communications"
/>

Multiple Checkboxes

Group related checkboxes together for multi-select options.

Dark Mode

Push Notifications

Auto-save

svelte

<script lang="ts">
  let features = $state({
    darkMode: true,
    notifications: false,
    autoSave: true
  });
</script>

<CheckboxInput name="darkMode" label="Dark Mode" bind:checked={features.darkMode} />
<CheckboxInput name="notifications" label="Push Notifications" bind:checked={features.notifications} />
<CheckboxInput name="autoSave" label="Auto-save" bind:checked={features.autoSave} />

Interactive Example

Toggle the checkbox to see the bound value update:

Toggle me

Checked: No

svelte

<script lang="ts">
  let checked = $state(false);
</script>

<CheckboxInput
  name="interactive"
  label="Toggle me"
  bind:checked
/>
<p>Checked: {checked ? 'Yes' : 'No'}</p>

Voice Control (smrt Mode)

In smrt mode, checkboxes can be controlled via voice commands. The component understands natural language like "yes", "no", "true", "false", "check", "uncheck", etc.

svelte

<!-- Voice commands: "yes", "no", "true", "false", "check", "uncheck" -->
<CheckboxInput
  name="voiceControl"
  label="Voice controlled checkbox"
  description="Say yes or no to toggle"
/>

Props

Prop	Type	Default	Description
`name` *	`string`	-	Field name for form submission
`label`	`string`	`undefined`	Label text displayed next to the checkbox
`description`	`string`	`undefined`	Description text for voice extraction context
`checked`	`boolean`	`false`	Current checked state (bindable)
`disabled`	`boolean`	`false`	Disables the checkbox
`required`	`boolean`	`false`	Marks field as required
`onchange`	`(checked: boolean) => void`	`undefined`	Callback when checked state changes

TypeScript

typescript

import { CheckboxInput } from '@happyvertical/smrt-svelte';

// Props interface
interface Props {
  name: string;
  label?: string;
  description?: string;
  checked?: boolean;
  disabled?: boolean;
  required?: boolean;
  onchange?: (checked: boolean) => void;
}