Checkbox

<script lang="ts">
    import { Checkbox, type CheckboxEvent } from '@fibrae/semi-ui-svelte';

    const onChange = (e: CheckboxEvent) => console.log(e);
</script>

<Checkbox aria-label="Checkbox 示例" {onChange}>Semi Design</Checkbox>

<script lang="ts">
    import { Checkbox, type CheckboxEvent } from '@fibrae/semi-ui-svelte';

    const onChange = (e: CheckboxEvent) => console.log(e);
</script>

<Checkbox aria-label="Checkbox 示例" checked {onChange}>Semi Design</Checkbox>

<script lang="ts">
    import { Checkbox } from '@fibrae/semi-ui-svelte';

    const extraText = 'Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统';
</script>

<Checkbox aria-label="Checkbox 示例">
    Semi Design
    {#snippet extra()}{extraText}{/snippet}
</Checkbox>
<br />
<Checkbox aria-label="Checkbox 示例" style="width: 280px">
    Semi Design
    {#snippet extra()}{extraText}{/snippet}
</Checkbox>

<script lang="ts">
    import { Checkbox } from '@fibrae/semi-ui-svelte';
</script>

<div>
    <Checkbox aria-label="Checkbox 示例" checked={false} disabled>Unchecked Disabled</Checkbox>
    <br />
    <Checkbox aria-label="Checkbox 示例" checked disabled>Checked Disabled</Checkbox>
</div>

<script lang="ts">
    import { Checkbox, CheckboxGroup } from '@fibrae/semi-ui-svelte';

    const values = ['A', 'B', 'C', 'D', 'E'];
</script>

<CheckboxGroup aria-label="CheckboxGroup 示例" style="width: 100%" value={['A', 'B']}>
    {#each values as value (value)}
        <Checkbox {value}>{value}</Checkbox>
    {/each}
</CheckboxGroup>

<script lang="ts">
    import { CheckboxGroup, type CheckboxValue } from '@fibrae/semi-ui-svelte';

    const onChange = (checkedValues: CheckboxValue[]) => console.log('checked = ', checkedValues);

    const plainOptions = ['Semi UI', 'Semi DSM', 'Semi D2C'];

    const optionsWithExtra = [
        {
            extra: '从 Semi Design，到 Any Design 快速定制你的设计系统，并应用在设计稿和代码中',
            label: 'Semi DSM',
            value: 'dsm',
        },
        { extra: '高效的 Design To Code 设计稿转代码', label: 'Semi D2C', value: 'd2c' },
    ];

    const optionsWithDisabled = [
        { label: 'Photography', value: 'Photography' },
        { label: 'Movies', value: 'Movies' },
        { label: 'Running', value: 'Running', disabled: false },
    ];
</script>

<div>
    <CheckboxGroup aria-label="CheckboxGroup 示例" {onChange} options={plainOptions} value={['Semi D2C']} />
    <br />
    <br />
    <CheckboxGroup aria-label="带 extra 示例" {onChange} options={optionsWithExtra} value={[]} />
    <br />
    <br />
    <CheckboxGroup aria-label="Checkbox 示例" disabled {onChange} options={optionsWithDisabled} value={['Photography']} />
</div>

<script lang="ts">
    import { CheckboxGroup } from '@fibrae/semi-ui-svelte';

    const options = [
        { label: '抖音', value: 'abc' },
        { label: '今日头条', value: 'toutiao' },
    ];
</script>

<CheckboxGroup aria-label="CheckboxGroup 示例" direction="horizontal" {options} />

<script lang="ts">
    import { Button, Checkbox, type CheckboxEvent } from '@fibrae/semi-ui-svelte';

    let checked = $state(true);
    let disabled = $state(false);
    const label = $derived(`${checked ? 'Checked' : 'Unchecked'} ${disabled ? 'Disabled' : 'Enabled'}`);

    const onChange = (e: CheckboxEvent) => console.log('checked = ', e.target.checked);
</script>

<div>
    <div style="margin-bottom: 20px">
        <Checkbox aria-label="Checkbox 示例" bind:checked {disabled} {onChange}>
            {label}
        </Checkbox>
    </div>
    <p>
        <Button size="small" type="primary" onclick={() => (checked = !checked)}>{!checked ? 'Check' : 'Uncheck'}</Button>
        <Button size="small" style="margin-left: 10px" type="primary" onclick={() => (disabled = !disabled)}>
            {!disabled ? 'Disable' : 'Enable'}
        </Button>
    </p>
</div>

<script lang="ts">
    import { Checkbox, CheckboxGroup, type CheckboxEvent, type CheckboxValue } from '@fibrae/semi-ui-svelte';

    const plainOptions = ['Photography', 'Movies', 'Running'];
    let checkedList = $state<CheckboxValue[]>(['Photography', 'Running']);
    const checkAll = $derived(checkedList.length === plainOptions.length);
    const indeterminate = $derived(checkedList.length > 0 && !checkAll);

    const onCheckAllChange = (e: CheckboxEvent) => {
        console.log(e);
        checkedList = e.target.checked ? plainOptions : [];
    };
</script>

<div>
    <div style="padding-bottom: 8px; border-bottom: 1px solid var(--semi-color-border)">
        <Checkbox aria-label="Checkbox 示例" checked={checkAll} {indeterminate} onChange={onCheckAllChange}>Check all</Checkbox>
    </div>
    <CheckboxGroup aria-label="CheckboxGroup 示例" bind:value={checkedList} options={plainOptions} style="margin-top: 6px" />
</div>

<script lang="ts">
    import { Checkbox, CheckboxGroup } from '@fibrae/semi-ui-svelte';

    const extraText = 'Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统';
    const items = [
        { value: '1', disabled: true },
        { value: '2', disabled: true },
        { value: '3', disabled: false },
        { value: '4', disabled: false },
    ];
</script>

<CheckboxGroup aria-label="CheckboxGroup 示例" direction="vertical" type="card" value={['1', '3']}>
    {#each items as item (item.value)}
        <Checkbox disabled={item.disabled} style="width: 280px" value={item.value}>
            单选框标题
            {#snippet extra()}{extraText}{/snippet}
        </Checkbox>
    {/each}
</CheckboxGroup>

<script lang="ts">
    import { Checkbox, CheckboxGroup } from '@fibrae/semi-ui-svelte';

    const extraText = 'Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统';
    const items = [
        { value: '1', disabled: true },
        { value: '2', disabled: true },
        { value: '3', disabled: false },
        { value: '4', disabled: false },
    ];
</script>

<CheckboxGroup aria-label="CheckboxGroup 示例" direction="vertical" type="pureCard" value={['1', '3']}>
    {#each items as item (item.value)}
        <Checkbox disabled={item.disabled} style="width: 280px" value={item.value}>
            单选框标题
            {#snippet extra()}{extraText}{/snippet}
        </Checkbox>
    {/each}
</CheckboxGroup>

<script lang="ts">
    import { Checkbox, CheckboxGroup, Col, Row } from '@fibrae/semi-ui-svelte';

    const values = ['A', 'B', 'C', 'D', 'E'];
</script>

<CheckboxGroup aria-label="CheckboxGroup 示例" style="width: 100%">
    <Row>
        {#each values as value (value)}
            <Col span={8}>
                <Checkbox {value}>{value}</Checkbox>
            </Col>
        {/each}
    </Row>
</CheckboxGroup>