logo-icon
STWUI

Checkbox

Checkboxes are used to select or deselect a value.

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 indeterminate 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>
Default checked

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

<CheckboxGroup>
	<CheckboxGroup.Checkbox name="cb-19" value="cb-19" checked={true}>
			<CheckboxGroup.Checkbox.Label slot="label">Checkbox-19</CheckboxGroup.Checkbox.Label>
	</CheckboxGroup.Checkbox>
</CheckboxGroup>
Disabled

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

<CheckboxGroup>
	<CheckboxGroup.Checkbox name="cb-17" value="cb-17" disabled={true}>
			<CheckboxGroup.Checkbox.Label slot="label">Checkbox-17</CheckboxGroup.Checkbox.Label>
	</CheckboxGroup.Checkbox>
	<CheckboxGroup.Checkbox name="cb-18" value="cb-18" disabled={true} checked={true}>
			<CheckboxGroup.Checkbox.Label slot="label">Checkbox-18</CheckboxGroup.Checkbox.Label>
	</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
indeterminate boolean false
disabled boolean false
checked boolean false

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