Forms

CheckboxGroup

A group of checkboxes for multi-select. Supports list/card variants, horizontal/vertical orientation, legend, descriptions, and controlled state with bind:value.

Playground

Experiment with different props in real-time.

Choose fruits

Apple

Banana

Orange

Variant

Color

Size

Orientation

Disabled

Selected: none

Basic Usage

Pass an array of items and use bind:value for the selected values.

Apple

Banana

Orange

<script lang="ts">
  import { CheckboxGroup } from 'sv5ui';

  let value = $state<string[]>([]);

  const items = [
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana' },
    { value: 'orange', label: 'Orange' }
  ];
</script>

<CheckboxGroup {items} bind:value />

With Legend & Description

Add a legend and per-item description.

Notification preferences

Receive notifications via email

SMS

Receive notifications via text message

Push

Receive push notifications on your device

<CheckboxGroup
  legend="Notification preferences"
  items={[
    { value: 'email', label: 'Email', description: 'Receive notifications via email' },
    { value: 'sms', label: 'SMS', description: 'Receive notifications via text message' },
    { value: 'push', label: 'Push', description: 'Receive push notifications on your device' }
  ]}
  bind:value
/>

Variants

2 visual styles.

List

Apple

Banana

Orange

Card

Apple

Banana

Orange

<!-- List variant (default) -->
<CheckboxGroup variant="list" legend="List" {items} />

<!-- Card variant -->
<CheckboxGroup variant="card" legend="Card" {items} />

Indicator Position

Control where the checkbox indicator appears.

Start

Apple

Banana

Orange

End

Apple

Banana

Orange

Hidden

Apple

Banana

Orange

<CheckboxGroup indicator="start" legend="Start" {items} />
<CheckboxGroup indicator="end" legend="End" {items} />
<CheckboxGroup indicator="hidden" legend="Hidden" {items} />

Orientation

Vertical or horizontal layout.

Vertical

Apple

Banana

Orange

Horizontal

Apple

Banana

Orange

<!-- Vertical (default) -->
<CheckboxGroup orientation="vertical" {items} />

<!-- Horizontal -->
<CheckboxGroup orientation="horizontal" {items} />

Sizes

5 sizes.

Apple

Banana

Orange

Apple

Banana

Orange

Apple

Banana

Orange

Apple

Banana

Orange

Apple

Banana

Orange

<CheckboxGroup size="xs" legend="Extra Small" {items} />
<CheckboxGroup size="sm" legend="Small" {items} />
<CheckboxGroup size="md" legend="Medium" {items} />
<CheckboxGroup size="lg" legend="Large" {items} />
<CheckboxGroup size="xl" legend="Extra Large" {items} />

Colors

8 semantic color schemes.

Primary

Apple

Banana

Orange

Success

Apple

Banana

Orange

Warning

Apple

Banana

Orange

Error

Apple

Banana

Orange

<CheckboxGroup color="primary" {items} value={['apple']} />
<CheckboxGroup color="success" {items} value={['apple']} />
<CheckboxGroup color="warning" {items} value={['apple']} />
<CheckboxGroup color="error" {items} value={['apple']} />

Disabled

Disable the entire group or individual items.

All disabled

Apple

Banana

Orange

Individual disabled

Active option

Disabled option

Another active option

<!-- Disable entire group -->
<CheckboxGroup disabled {items} />

<!-- Disable individual items -->
<CheckboxGroup items={[
  { value: 'active', label: 'Active option' },
  { value: 'disabled', label: 'Disabled option', disabled: true },
  { value: 'another', label: 'Another active option' }
]} />

Loading

Show spinner and disable interaction.

Apple

Banana

Orange

<CheckboxGroup loading {items} />

Custom Icon

Replace the default check icon.

Apple

Banana

Orange

<CheckboxGroup icon="lucide:heart" color="error" {items} value={['apple', 'banana']} />

Controlled

Use bind:value for two-way binding.

Receive notifications via email

SMS

Receive notifications via text message

Push

Receive push notifications on your device

Selected: email

<script lang="ts">
  import { CheckboxGroup } from 'sv5ui';

  let value = $state(['email']);

  const items = [
    { value: 'email', label: 'Email' },
    { value: 'sms', label: 'SMS' },
    { value: 'push', label: 'Push' }
  ];
</script>

<CheckboxGroup {items} bind:value />
<p>Selected: {value.join(', ') || 'none'}</p>

Card Grid

Combine card variant with horizontal orientation for a grid selection layout.

Choose your plan

Free

5GB storage

Pro

50GB storage

Team

Unlimited

<CheckboxGroup
  variant="card"
  orientation="horizontal"
  legend="Choose your plan"
  items={[
    { value: 'free', label: 'Free', description: '5GB storage' },
    { value: 'pro', label: 'Pro', description: '50GB storage' },
    { value: 'team', label: 'Team', description: 'Unlimited' }
  ]}
  bind:value
/>

UI Slots

Use the ui prop to override classes on internal elements.

Slot	Description
`root`	`Outermost wrapper`
`fieldset`	`Main container for all items`
`legend`	`Legend text above the group`
`item`	`Each individual checkbox item container`
`base`	`The checkbox box itself`
`container`	`Visual box holding the indicator`
`indicator`	`Inner element shown when checked`
`icon`	`Icon inside the indicator`
`wrapper`	`Wraps label and description text`
`label`	`Primary text label`
`description`	`Secondary helper text`

Snippets

Snippet	Description
`legendSlot`	`Custom legend rendering`
`labelSlot`	`Custom label for each item`
`descriptionSlot`	`Custom description for each item`

Props

Prop	Type	Default	Description
`items`	`CheckboxGroupItem[]`	`-`	`Array of checkbox items`
`value`	`string[]`	`[]`	`Selected values (bindable)`
`onValueChange`	`(value) => void`	`-`	`Callback on selection change`
`variant`	`'list' \| 'card'`	`'list'`	`Visual style`
`indicator`	`'start' \| 'end' \| 'hidden'`	`'start'`	`Indicator position`
`orientation`	`'vertical' \| 'horizontal'`	`'vertical'`	`Layout direction`
`color`	`ColorType`	`'primary'`	`Color scheme`
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	`Dimensions`
`legend`	`string`	`-`	`Legend text above the group`
`icon`	`string`	`'lucide:check'`	`Checked state icon`
`loading`	`boolean`	`false`	`Show loading spinner`
`loadingIcon`	`string`	`icons.loading`	`Custom loading icon`
`disabled`	`boolean`	`false`	`Disable entire group`
`required`	`boolean`	`false`	`Required for form validation`
`name`	`string`	`-`	`HTML name for form submission`
`id`	`string`	`-`	`HTML id attribute`
`ref`	`HTMLElement \| null`	`null`	`Bindable reference to root element`
`class`	`string`	`-`	`Additional CSS classes`
`ui`	`Record<Slot, Class>`	`-`	`Override slot classes`

Item Props

Prop	Type	Default	Description
`value`	`string`	`-`	`Unique value for this item`
`label`	`string`	`-`	`Label text`
`description`	`string`	`-`	`Description below label`
`disabled`	`boolean`	`false`	`Disable this item`

Checkbox Input