单选框

import { Radio } from '@fibrous/semi-ui-solid';

export default function RadioDemo() {
    return (
        <Radio aria-label="单选示例" name="demo-radio">
            Radio
        </Radio>
    );
}

import { Radio } from '@fibrous/semi-ui-solid';

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

import { createSignal } from 'solid-js';
import { Button, Radio } from '@fibrous/semi-ui-solid';

export default function RadioDemo() {
    const [disabled, setDisabled] = createSignal(true);
    return (
        <div>
            <Radio defaultChecked={false} disabled={disabled()} aria-label="单选示例" name="demo-radio-disabled">
                Disabled
            </Radio>
            <br />
            <Radio defaultChecked disabled={disabled()} aria-label="单选示例" name="demo-radio-defaultChecked-disabled">
                Disabled
            </Radio>
            <div style={{ 'margin-top': '20px' }}>
                <Button type="primary" onClick={() => setDisabled(!disabled())}>
                    Toggle disabled
                </Button>
            </div>
        </div>
    );
}

import { createSignal } from 'solid-js';
import { Radio, type RadioChangeEvent } from '@fibrous/semi-ui-solid';

export default function RadioDemo() {
    const [checked, setChecked] = createSignal(true);
    const toggle = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.checked);
        setChecked(e.target.checked);
    };
    return (
        <Radio checked={checked()} mode="advanced" onChange={toggle} aria-label="单选示例" name="demo-radio-advanced">
            允许取消选择
        </Radio>
    );
}

import { createSignal } from 'solid-js';
import { Radio, RadioGroup, type RadioChangeEvent } from '@fibrous/semi-ui-solid';

export default function RadioDemo() {
    const [value, setValue] = createSignal(1);
    const onChange = (e: RadioChangeEvent) => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    return (
        <RadioGroup onChange={onChange} value={value()} aria-label="单选组合示例" name="demo-radio-group">
            <Radio value={1}>A</Radio>
            <Radio value={2}>B</Radio>
            <Radio value={3}>C</Radio>
            <Radio value={4}>D</Radio>
        </RadioGroup>
    );
}

import { Radio, RadioGroup } from '@fibrous/semi-ui-solid';

export default function RadioDemo() {
    return (
        <RadioGroup direction="vertical" aria-label="单选组合示例" 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>
    );
}

import { For } from 'solid-js';
import { Radio, RadioGroup, Space } from '@fibrous/semi-ui-solid';

const sizes = ['small', 'middle', 'large'] as const;

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

import { Radio, RadioGroup } from '@fibrous/semi-ui-solid';

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

export default function RadioDemo() {
    return (
        <RadioGroup type="card" defaultValue={2} direction="vertical" aria-label="单选组合示例" name="demo-radio-group-card">
            <Radio value={1} disabled extra={extra} style={{ width: '280px' }}>
                单选框标题
            </Radio>
            <Radio value={2} extra={extra} style={{ width: '280px' }}>
                单选框标题
            </Radio>
            <Radio value={3} extra={extra} style={{ width: '280px' }}>
                单选框标题
            </Radio>
        </RadioGroup>
    );
}

import { Radio, RadioGroup } from '@fibrous/semi-ui-solid';

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

export default function RadioDemo() {
    return (
        <RadioGroup type="pureCard" defaultValue={2} direction="vertical" aria-label="单选组合示例" name="demo-radio-group-pureCard">
            <Radio value={1} disabled extra={extra} style={{ width: '280px' }}>
                单选框标题
            </Radio>
            <Radio value={2} extra={extra} style={{ width: '280px' }}>
                单选框标题
            </Radio>
            <Radio value={3} extra={extra} style={{ width: '280px' }}>
                单选框标题
            </Radio>
        </RadioGroup>
    );
}

import { createSignal } from 'solid-js';
import { RadioGroup, Space, type RadioChangeEvent } from '@fibrous/semi-ui-solid';

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 },
];

export default function RadioDemo() {
    const [value1, setValue1] = createSignal('Guest');
    const [value2, setValue2] = createSignal('Developer');
    const [value3, setValue3] = createSignal('Maintainer');

    const onChange1 = (e: RadioChangeEvent) => {
        console.log('radio1 checked', e.target.value);
        setValue1(e.target.value);
    };
    const onChange2 = (e: RadioChangeEvent) => {
        console.log('radio2 checked', e.target.value);
        setValue2(e.target.value);
    };
    const onChange3 = (e: RadioChangeEvent) => {
        console.log('radio3 checked', e.target.value);
        setValue3(e.target.value);
    };

    return (
        <Space vertical align="start" spacing="loose">
            <RadioGroup options={plainOptions} onChange={onChange1} value={value1()} aria-label="单选组合示例" name="demo-radio-group-1" />
            <RadioGroup options={optionsWithDisabled} onChange={onChange2} value={value2()} aria-label="单选组合示例" name="demo-radio-group-2" />
            <RadioGroup options={options} onChange={onChange3} value={value3()} aria-label="单选组合示例" name="demo-radio-group-3" />
        </Space>
    );
}