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

6
src/lib/Checkbox.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts" module> <script lang="ts" module>
export type CheckboxState = 'indeterminate' | boolean; export type CheckboxState = 'indeterminate' | boolean | undefined;
</script> </script>
<script lang="ts"> <script lang="ts">
@@ -21,7 +21,7 @@
let { let {
name, name,
required = false, required = false,
value = $bindable(false), value = $bindable(),
color = 'contrast', color = 'contrast',
class: classValue, class: classValue,
children, children,
@@ -37,7 +37,7 @@
<input <input
type="hidden" type="hidden"
{name} {name}
value={value.toString()} value={value?.toString() ?? 'false'}
use:validate={{ use:validate={{
valfunc: () => { valfunc: () => {
if (required && value !== true) { if (required && value !== true) {

21
src/routes/+page.svelte
View File

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