logo-icon
STWUI

Checkbox

Default

svelte 
<script lang="ts">
	import { CheckboxGroup } from 'stwui';
</script>

<CheckboxGroup>
   <CheckboxGroup.Checkbox name="cb-1" value="cb-1">
      <CheckboxGroup.Checkbox.Label slot="label">Checkbox-1</CheckboxGroup.Checkbox.Label>
   </CheckboxGroup.Checkbox>
   <CheckboxGroup.Checkbox name="cb-2" value="cb-2">
      <CheckboxGroup.Checkbox.Label slot="label">Checkbox-2</CheckboxGroup.Checkbox.Label>
   </CheckboxGroup.Checkbox>
   <CheckboxGroup.Checkbox name="cb-3" value="cb-3">
      <CheckboxGroup.Checkbox.Label slot="label">Checkbox-3</CheckboxGroup.Checkbox.Label>
   </CheckboxGroup.Checkbox>
   <CheckboxGroup.Checkbox name="cb-4" value="cb-4">
      <CheckboxGroup.Checkbox.Label slot="label">Checkbox-4</CheckboxGroup.Checkbox.Label>
   </CheckboxGroup.Checkbox>
</CheckboxGroup>
With Label and Description
Checkbox Group

desc-9

desc-10

desc-11

desc-12


svelte 
<script lang="ts">
	import { CheckboxGroup } from 'stwui';
</script>

<CheckboxGroup>
   <CheckboxGroup.Label slot="label">Checkbox Group</CheckboxGroup.Label>
   <CheckboxGroup.Checkbox name="cb-9" value="cb-9">
      <CheckboxGroup.Checkbox.Label slot="label">Checkbox-9</CheckboxGroup.Checkbox.Label>
      <CheckboxGroup.Checkbox.Description slot="description">
         desc-9
      </CheckboxGroup.Checkbox.Description>
   </CheckboxGroup.Checkbox>
   <CheckboxGroup.Checkbox name="cb-10" value="cb-10">
      <CheckboxGroup.Checkbox.Label slot="label">Checkbox-10</CheckboxGroup.Checkbox.Label>
      <CheckboxGroup.Checkbox.Description slot="description">
         desc-10
      </CheckboxGroup.Checkbox.Description>
   </CheckboxGroup.Checkbox>
   <CheckboxGroup.Checkbox name="cb-11" value="cb-11">
      <CheckboxGroup.Checkbox.Label slot="label">Checkbox-11</CheckboxGroup.Checkbox.Label>
      <CheckboxGroup.Checkbox.Description slot="description">
         desc-11
      </CheckboxGroup.Checkbox.Description>
   </CheckboxGroup.Checkbox>
   <CheckboxGroup.Checkbox name="cb-12" value="cb-12">
      <CheckboxGroup.Checkbox.Label slot="label">Checkbox-12</CheckboxGroup.Checkbox.Label>
      <CheckboxGroup.Checkbox.Description slot="description">
         desc-12
      </CheckboxGroup.Checkbox.Description>
   </CheckboxGroup.Checkbox>
</CheckboxGroup>
Inline Checkbox
Checkbox Group
| desc-13
| desc-14
| desc-15
| desc-16

svelte 
<script lang="ts">
	import { CheckboxGroup } from 'stwui';
</script>

<CheckboxGroup inline>
   <CheckboxGroup.Label slot="label">Checkbox Group</CheckboxGroup.Label>
   <CheckboxGroup.Checkbox name="cb-13" value="cb-13">
      <CheckboxGroup.Checkbox.Label slot="label">Checkbox-13</CheckboxGroup.Checkbox.Label>
      <CheckboxGroup.Checkbox.Description slot="description">
         desc-13
      </CheckboxGroup.Checkbox.Description>
   </CheckboxGroup.Checkbox>
   <CheckboxGroup.Checkbox name="cb-14" value="cb-14">
      <CheckboxGroup.Checkbox.Label slot="label">Checkbox-14</CheckboxGroup.Checkbox.Label>
      <CheckboxGroup.Checkbox.Description slot="description">
         desc-14
      </CheckboxGroup.Checkbox.Description>
   </CheckboxGroup.Checkbox>
   <CheckboxGroup.Checkbox name="cb-15" value="cb-15">
      <CheckboxGroup.Checkbox.Label slot="label">Checkbox-15</CheckboxGroup.Checkbox.Label>
      <CheckboxGroup.Checkbox.Description slot="description">
         desc-15
      </CheckboxGroup.Checkbox.Description>
   </CheckboxGroup.Checkbox>
   <CheckboxGroup.Checkbox name="cb-16" value="cb-16">
      <CheckboxGroup.Checkbox.Label slot="label">Checkbox-16</CheckboxGroup.Checkbox.Label>
      <CheckboxGroup.Checkbox.Description slot="description">
         desc-16
      </CheckboxGroup.Checkbox.Description>
   </CheckboxGroup.Checkbox>
</CheckboxGroup>

CheckboxGroup Props

inline boolean false

CheckboxGroup Slots

label <CheckboxGroup.Label slot="label" />
default <CheckboxGroup.Checkbox />

CheckboxGroup.Label Slots

default

CheckboxGroup.Checkbox Props

name string
value string

CheckboxGroup.Checkbox Slots

label <CheckboxGroup.Checkbox.Label slot="label" />
description <CheckboxGroup.Checkbox.Description slot="description" />
default

CheckboxGroup.Checkbox.Label Slots

default

CheckboxGroup.Checkbox.Description Slots

default