Checkbox
Checkboxes are used to select or deselect a value.
Usage
import { CheckboxGroup } from 'stwui';
import CheckboxGroup from 'stwui/checkbox';
<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
<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>
With Inline Description
<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>
With Default Checked
<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>
With Disabled
<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>
<script lang="ts">
import { CheckboxGroup } from 'stwui';
let checked = false;
let error: string | undefined = 'Here is an error!';
$: if (checked) {
error = undefined;
} else {
error = 'Here is an error!';
}
</script>
<CheckboxGroup>
<CheckboxGroup.Checkbox name="cb-20" value="cb-20" {error} bind:checked>
<CheckboxGroup.Checkbox.Label slot="label">Checkbox-20</CheckboxGroup.Checkbox.Label>
</CheckboxGroup.Checkbox>
<CheckboxGroup.Checkbox name="cb-21" value="cb-21">
<CheckboxGroup.Checkbox.Label slot="label">Checkbox-21</CheckboxGroup.Checkbox.Label>
</CheckboxGroup.Checkbox>
</CheckboxGroup>
CheckboxGroup Slots
| label | <CheckboxGroup.Label slot="label" /> |
| default | <CheckboxGroup.Checkbox /> |
CheckboxGroup.Label Slots
CheckboxGroup.Checkbox Props
| name | string | nanoid() |
| value | string | |
| indeterminate | boolean | false |
| disabled | boolean | false |
| checked | boolean | false |
| error | string | undefined | |
CheckboxGroup.Checkbox Slots
| label | <CheckboxGroup.Checkbox.Label slot="label" /> |
| description | <CheckboxGroup.Checkbox.Description slot="description" /> |
| default | |
CheckboxGroup.Checkbox.Label Slots
CheckboxGroup.Checkbox.Description Slots
CheckboxGroup Class Identifiers
| stwui-checkbox-wrapper |
| stwui-checkbox |
| stwui-checkbox-error |
| stwui-checkbox-group |
| stwui-checkbox-description |
| stwui-checkbox-group-label |
| stwui-checkbox-label |
