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

checkbox: support disabled state

Browse Source
This commit is contained in:
Elijah Duffy
2025-12-11 11:42:28 -08:00
parent 058e20fa2d
commit f260038aac
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/Checkbox.svelte
View File

@@ -12,6 +12,7 @@
interface Props { interface Props {
name?: string; name?: string;
required?: boolean; required?: boolean;
disabled?: boolean;
value?: MaybeGetter<CheckboxState>; value?: MaybeGetter<CheckboxState>;
color?: 'default' | 'contrast'; color?: 'default' | 'contrast';
class?: ClassValue | null | undefined; class?: ClassValue | null | undefined;
@@ -22,6 +23,7 @@
let { let {
name, name,
required = false, required = false,
disabled = false,
value = $bindable(), value = $bindable(),
color = 'contrast', color = 'contrast',
class: classValue, class: classValue,
@@ -58,12 +60,14 @@
<button <button
type="button" type="button"
{id} {id}
{disabled}
class={[ class={[
'text-sui-text flex size-7 shrink-0 appearance-none items-center', 'text-sui-text flex size-7 shrink-0 appearance-none items-center',
'justify-center rounded-lg shadow transition-all hover:opacity-75', 'justify-center rounded-lg shadow transition-all',
color === 'default' && 'bg-white', color === 'default' && 'bg-white',
color === 'contrast' && 'border-text/40 border bg-white', color === 'contrast' && 'border-text/40 border bg-white',
!valid && 'border border-red-500' !valid && 'border border-red-500',
disabled ? 'cursor-not-allowed opacity-50' : 'hover:opacity-75'
]} ]}
onclick={() => { onclick={() => {
const resolved = resolveGetter(value); const resolved = resolveGetter(value);