mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
44 lines
963 B
Svelte
44 lines
963 B
Svelte
<script>
|
|
/** Specify whether the checkbox is checked */
|
|
export let checked = false;
|
|
|
|
/** Specify whether the checkbox is indeterminate */
|
|
export let indeterminate = false;
|
|
|
|
/**
|
|
* Specify the title attribute for the label element
|
|
* @type {string}
|
|
*/
|
|
export let title = undefined;
|
|
|
|
/**
|
|
* Set an id for the input label
|
|
* @type {string}
|
|
*/
|
|
export let id = "ccs-" + Math.random().toString(36);
|
|
|
|
/**
|
|
* Obtain a reference to the input HTML element
|
|
* @type {null | HTMLInputElement}
|
|
*/
|
|
export let ref = null;
|
|
</script>
|
|
|
|
<input
|
|
bind:this="{ref}"
|
|
type="checkbox"
|
|
class:bx--checkbox="{true}"
|
|
checked="{indeterminate ? false : checked}"
|
|
indeterminate="{indeterminate}"
|
|
id="{id}"
|
|
{...$$restProps}
|
|
aria-label="{undefined}"
|
|
aria-checked="{indeterminate ? 'mixed' : checked}"
|
|
on:change
|
|
/>
|
|
<label
|
|
for="{id}"
|
|
title="{title}"
|
|
aria-label="{$$props['aria-label']}"
|
|
class:bx--checkbox-label="{true}"
|
|
></label>
|