Radio

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

<Radio aria-label="单选示例" name="demo-radio">Radio</Radio>

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

<Radio aria-label="单选示例" name="demo-radio-extra">
    Semi Design
    {#snippet extra()}Semi Design 是由抖音前端团队与 UED 团队共同设计开发并维护的设计系统{/snippet}
</Radio>

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

    let disabled = $state(true);
</script>

<div>
    <Radio aria-label="单选示例" checked={false} {disabled} name="demo-radio-disabled">Disabled</Radio>
    <br />
    <Radio aria-label="单选示例" checked {disabled} name="demo-radio-defaultChecked-disabled">Disabled</Radio>
    <div style="margin-top: 20px">
        <Button type="primary" onclick={() => (disabled = !disabled)}>Toggle disabled</Button>
    </div>
</div>

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

    let checked = $state(true);
    const onChange = (e: RadioChangeEvent) => console.log('radio checked', e.target.checked);
</script>

<Radio aria-label="单选示例" bind:checked mode="advanced" name="demo-radio-advanced" {onChange}>允许取消选择</Radio>

<script lang="ts">
    import { Radio, RadioGroup, type RadioChangeEvent, type RadioValue } from '@fibrae/semi-ui-svelte';

    let value = $state<RadioValue | undefined>(1);
    const onChange = (e: RadioChangeEvent) => console.log('radio checked', e.target.value);
</script>

<RadioGroup aria-label="单选组合示例" bind:value name="demo-radio-group" {onChange}>
    <Radio value={1}>A</Radio>
    <Radio value={2}>B</Radio>
    <Radio value={3}>C</Radio>
    <Radio value={4}>D</Radio>
</RadioGroup>

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

<RadioGroup aria-label="单选组合示例" direction="vertical" name="demo-radio-group-vertical">
    <Radio value={1}>A</Radio>
    <Radio value={2}>B</Radio>
    <Radio value={3}>C</Radio>
    <Radio value={4}>D</Radio>
</RadioGroup>

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

    const sizes = ['small', 'middle', 'large'] as const;
</script>

<Space align="start" spacing="loose" vertical>
    {#each sizes as size (size)}
        <RadioGroup aria-label="单选组合示例" buttonSize={size} name={`demo-radio-${size}`} type="button" value={1}>
            <Radio value={1}>即时推送</Radio>
            <Radio value={2}>定时推送</Radio>
            <Radio value={3}>动态推送</Radio>
        </RadioGroup>
    {/each}
</Space>

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

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

<RadioGroup aria-label="单选组合示例" direction="vertical" name="demo-radio-group-card" type="card" value={2}>
    {#each items as item (item.value)}
        <Radio disabled={item.disabled} style="width: 280px" value={item.value}>
            单选框标题
            {#snippet extra()}{extraText}{/snippet}
        </Radio>
    {/each}
</RadioGroup>

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

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

<RadioGroup aria-label="单选组合示例" direction="vertical" name="demo-radio-group-pureCard" type="pureCard" value={2}>
    {#each items as item (item.value)}
        <Radio disabled={item.disabled} style="width: 280px" value={item.value}>
            单选框标题
            {#snippet extra()}{extraText}{/snippet}
        </Radio>
    {/each}
</RadioGroup>

<script lang="ts">
    import { RadioGroup, Space, type RadioChangeEvent, type RadioValue } from '@fibrae/semi-ui-svelte';

    let value1 = $state<RadioValue | undefined>('Guest');
    let value2 = $state<RadioValue | undefined>('Developer');
    let value3 = $state<RadioValue | undefined>('Maintainer');
    const plainOptions = ['Guest', 'Developer', 'Maintainer'];
    const options = [
        { label: 'Guest', value: 'Guest', extra: 'Semi Design', style: 'width: 120px' },
        { label: 'Developer', value: 'Developer', extra: 'Semi Design', style: 'width: 120px' },
        { label: 'Maintainer', value: 'Maintainer', extra: 'Semi Design', style: 'width: 120px' },
    ];
    const optionsWithDisabled = [
        { label: 'Guest', value: 'Guest' },
        { label: 'Developer', value: 'Developer' },
        { label: 'Maintainer', value: 'Maintainer', disabled: true },
    ];

    const log = (name: string, e: RadioChangeEvent) => console.log(`${name} checked`, e.target.value);
</script>

<Space align="start" spacing="loose" vertical>
    <RadioGroup aria-label="单选组合示例" bind:value={value1} name="demo-radio-group-1" onChange={(e) => log('radio1', e)} options={plainOptions} />
    <RadioGroup aria-label="单选组合示例" bind:value={value2} name="demo-radio-group-2" onChange={(e) => log('radio2', e)} options={optionsWithDisabled} />
    <RadioGroup aria-label="单选组合示例" bind:value={value3} name="demo-radio-group-3" onChange={(e) => log('radio3', e)} {options} />
</Space>