feat(elements): allow setting size of checkbox to be smaller

This commit is contained in:
Steven Nguyen
2024-02-22 16:01:29 +01:00
committed by Torsten Dittmann
parent 2add3dbd65
commit a25fdf6ee9
2 changed files with 12 additions and 1 deletions
@@ -11,6 +11,7 @@
element?: HTMLInputElement | undefined;
indeterminate?: boolean;
wrapperTag?: FormItemTag;
size?: 'small' | 'medium';
}
export let id: string;
@@ -20,6 +21,7 @@
export let disabled = false;
export let element: HTMLInputElement | undefined = undefined;
export let wrapperTag: FormItemTag = 'li';
export let size: $$Props['size'] = 'medium';
let error: string;
const handleInvalid = (event: Event) => {
@@ -44,6 +46,7 @@
{disabled}
{required}
{...$$restProps}
class:is-small={size === 'small'}
type="checkbox"
bind:this={element}
bind:checked
@@ -1,11 +1,19 @@
<script lang="ts">
export let indeterminate = false;
export let checked = false;
export let fontSize: $$Props['fontSize'] = 'medium';
interface $$Props extends Partial<HTMLInputElement> {
indeterminate?: boolean;
checked?: boolean;
fontSize?: 'small' | 'medium';
}
</script>
<input type="checkbox" bind:checked {...$$restProps} bind:indeterminate on:change />
<input
class:is-small={fontSize === 'small'}
type="checkbox"
bind:checked
{...$$restProps}
bind:indeterminate
on:change />