Checkbox
Basic usage
Agree to our agreement
Click to our github repository
<script lang="ts">
let checked = false
</script>
<div class="c-flex c-gutter-x-md c-wrap">
<div>
<CCheckbox bind:value={checked} label="Agree to our agreement" />
</div>
<div>
<CCheckbox bind:value={checked}>
<p slot="label">
Click to our <a
href="https://github.com/Casual-UI/svelte"
rel="noreferrer"
target="_blank">github repository</a
>
</p>
</CCheckbox>
</div>
</div>
svelte
Click fold/expand code
Disabled
Disabled (not check)
Disabled (checked)
<script lang="ts">
let checked = false
let checked2 = true
</script>
<CCheckbox disabled bind:value={checked} label="Disabled (not check)" />
<CCheckbox disabled bind:value={checked2} label="Disabled (checked)" />
svelte
Click fold/expand code
Sizes
xs
sm
md (default)
lg
xl
<script lang="ts">
let checked = 'md'
</script>
<div class="c-flex c-gutter-x-md c-wrap c-items-center">
<div>
<CCheckbox bind:value={checked} label="xs" size="xs" checkedValue="xs" />
</div>
<div>
<CCheckbox bind:value={checked} label="sm" size="sm" checkedValue="sm" />
</div>
<div>
<CCheckbox
bind:value={checked}
label="md (default)"
size="md"
checkedValue="md"
/>
</div>
<div>
<CCheckbox bind:value={checked} label="lg" size="lg" checkedValue="lg" />
</div>
<div>
<CCheckbox bind:value={checked} label="xl" size="xl" checkedValue="xl" />
</div>
</div>
svelte
Click fold/expand code
CCheckbox Props
- valuedefault:
boolean | string | number=
undefined
Determine whether the checkbox is checked or not. It is recommended to use
bind:value
. - themedefault:
'primary' | 'secondary' | 'warning' | 'negative'
primary
The theme color
- sizedefault:
'xs' | 'sm' | 'md' | 'lg' | 'xl'=
undefined
The size of checkbox.
- labeldefault:
string
The text label of checkbox.
- checkedValuedefault:
boolean | string | number
true
The checked value pass to
value
prop when the checkbox is checked. - disableddefault:
boolean
false
Determine whether the checkbox is disabled or not.
CCheckbox Events
- change
Emit when the checked status change.
CCheckbox Slots
- label
Customize some label content. Notice that this slot would override the
label
prop
CCheckbox Exports
No data