Radio(React)

function RadioExample() {
    const [isChecked, setIsChecked] = React.useState(undefined);
    return (
        <Radio isChecked={isChecked} name="example-basic" onChange={v => setIsChecked(v)}>
            Long Distance Moving
        </Radio>
    );
}

function RadioExample() {
    const [selectedId, setSelectedId] = React.useState('long-distance');
    return (
        <div>
            <Radio
                id="long-distance"
                isChecked={selectedId === 'long-distance'}
                name="example-full"
                labelPadding="4px 0"
                onChange={(isChecked, id) => setSelectedId(id)}
            >
                Long Distance Moving
            </Radio>
            <Radio
                id="furniture-moving"
                isChecked={selectedId === 'furniture-moving'}
                name="example-full"
                labelPadding="4px 0"
                onChange={(isChecked, id) => setSelectedId(id)}
            >
                Furniture Moving and Heavy Lifting
            </Radio>
            <Radio
                id="pool-table"
                isChecked={selectedId === 'pool-table'}
                name="example-full"
                labelPadding="4px 0"
                onChange={(isChecked, id) => setSelectedId(id)}
            >
                Pool Table Moving
            </Radio>
        </div>
    );
}

<React.Fragment>
    <Radio isDisabled isChecked name="example-disabled" onChange={() => {}} labelPadding="4px 0">
        Long Distance Moving
    </Radio>
    <Radio
        isDisabled
        isChecked={false}
        name="example-disabled"
        onChange={() => {}}
        labelPadding="4px 0"
    >
        Furniture Moving and Heavy Lifting
    </Radio>
    <Radio
        isDisabled
        isChecked={false}
        name="example-disabled"
        onChange={() => {}}
        labelPadding="4px 0"
    >
        Pool Table Moving
    </Radio>
</React.Fragment>

function RadioExample() {
    const [isChecked, setIsChecked] = React.useState(undefined);
    return (
        <Radio isChecked={isChecked} hasError name="example-error" onChange={v => setIsChecked(v)}>
            Long Distance Moving
        </Radio>
    );
}

function RadioExample() {
    const [isChecked, setIsChecked] = React.useState(undefined);
    return (
        <Radio
            isChecked={isChecked}
            name="example-multi-column-content"
            onChange={v => setIsChecked(v)}
        >
            <div className="flex">
                <div className="flex-none">
                    <UserAvatar imageUrl="https://randomuser.me/api/portraits/women/63.jpg" />
                </div>
                <div className="flex items-center pl4" style={{ flex: '1 0 0%' }}>
                    <div>
                        <span className="b">Austin Entertainment LLC.</span>
                        <p>DJs, photo booths, and photography for all of your event needs.</p>
                    </div>
                    <div className="b ml-auto">$120/hr</div>
                </div>
            </div>
        </Radio>
    );
}

function RadioExample() {
    const [isChecked, setIsChecked] = React.useState(undefined);
    return (
        <Radio
            name="vertical-align"
            isChecked={isChecked}
            onChange={v => setIsChecked(v)}
            radioVerticalAlign="top"
        >
            <Text>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus est nec
                eros congue, ac dapibus ipsum cursus. Quisque at odio viverra, consequat metus a,
                commodo ipsum. Donec sodales sapien in luctus sodales. Vivamus ornare mauris in arcu
                maximus placerat.
            </Text>
        </Radio>
    );
}