svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

checkbox: support undefined state

Browse Source
This commit is contained in:
Elijah Duffy
2025-07-04 01:37:31 -07:00
parent f1b7ef2375
commit 12a79f0680
2 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/routes/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts">
import Button from '$lib/Button.svelte';
import Checkbox from '$lib/Checkbox.svelte';
import Checkbox, { type CheckboxState } from '$lib/Checkbox.svelte';
import Combobox from '$lib/Combobox.svelte';
import DateInput from '$lib/DateInput.svelte';
import Dialog from '$lib/Dialog.svelte';
@@ -18,6 +18,7 @@
import ToggleSelect from '$lib/ToggleSelect.svelte';
let dateInputValue = $state<Date | undefined>(undefined);
let checkboxValue = $state<CheckboxState>('indeterminate');
let dialogOpen = $state(false);
</script>
@@ -68,13 +69,17 @@
<div class="component">
<p class="title">Checkbox</p>
<Checkbox
name="example-checkbox"
value={'indeterminate'}
onchange={(value) => console.log('Checkbox value:', value)}
>
Agree to terms and conditions
</Checkbox>
<div class="flex items-center gap-4">
<Checkbox
name="example-checkbox"
bind:value={checkboxValue}
onchange={(value) => console.log('Checkbox value:', value)}
>
Agree to terms and conditions
</Checkbox>
<span>Checkbox is {checkboxValue}</span>
<Button onclick={() => (checkboxValue = 'indeterminate')}>Set Indeterminate</Button>
</div>
</div>
<div class="component">