46 lines
1.1 KiB
Svelte
46 lines
1.1 KiB
Svelte
<script lang="ts" generics="T">
|
|
import { cn } from "$lib/utils";
|
|
|
|
type Item = {
|
|
label: string;
|
|
value: T;
|
|
};
|
|
|
|
let {
|
|
label,
|
|
items,
|
|
value = $bindable(),
|
|
type = "checkbox",
|
|
class: className,
|
|
...rest
|
|
}: {
|
|
label?: string;
|
|
items: Item[];
|
|
value: any;
|
|
type?: "checkbox" | "radio";
|
|
class?: string;
|
|
} = $props();
|
|
</script>
|
|
|
|
<div class={cn("flex flex-col gap-2", className)}>
|
|
{#if label}
|
|
<span class="scn-label">{label}</span>
|
|
{/if}
|
|
<div class="chip-group" {...rest}>
|
|
{#each items as item}
|
|
<label class="chip">
|
|
{#if type === "checkbox"}
|
|
<input
|
|
type="checkbox"
|
|
bind:group={value}
|
|
value={item.value}
|
|
/>
|
|
{:else}
|
|
<input type="radio" bind:group={value} value={item.value} />
|
|
{/if}
|
|
<span>{item.label}</span>
|
|
</label>
|
|
{/each}
|
|
</div>
|
|
</div>
|