Checkbox(React)

function CheckboxExample() {
    const [isChecked, setIsChecked] = React.useState(undefined);
    return (
        <Checkbox isChecked={isChecked} onChange={setIsChecked}>
            Send me promotional emails
        </Checkbox>
    );
}

function CheckboxExample() {
    const [isMorningChecked, setIsMorningChecked] = React.useState(true);
    const [isAfternoonChecked, setIsAfternoonChecked] = React.useState(true);
    const [isEveningChecked, setIsEveningChecked] = React.useState(true);
    return (
        <div>
            <Checkbox
                id="morning"
                isChecked={isMorningChecked}
                name="example-full"
                labelPadding="4px 0"
                onChange={setIsMorningChecked}
            >
                Morning
            </Checkbox>
            <Checkbox
                id="afternoon"
                isChecked={isAfternoonChecked}
                name="example-full"
                labelPadding="4px 0"
                onChange={setIsAfternoonChecked}
            >
                Afternoon
            </Checkbox>
            <Checkbox
                id="evening"
                isChecked={isEveningChecked}
                name="example-full"
                labelPadding="4px 0"
                onChange={setIsEveningChecked}
            >
                Evening
            </Checkbox>
        </div>
    );
}

function CheckboxExample() {
    const [isChecked, setIsChecked] = React.useState(undefined);
    return (
        <Checkbox
            isIndeterminate={isChecked === undefined}
            isChecked={isChecked}
            onChange={setIsChecked}
        >
            Select all cities
        </Checkbox>
    );
}

<React.Fragment>
    <Checkbox isDisabled isChecked onChange={() => {}} labelPadding="4px 0">
        Morning
    </Checkbox>
    <Checkbox isDisabled isChecked onChange={() => {}} labelPadding="4px 0">
        Afternoon
    </Checkbox>
    <Checkbox isDisabled onChange={() => {}} labelPadding="4px 0">
        Evening
    </Checkbox>
</React.Fragment>

function CheckboxExample() {
    const [isChecked, setIsChecked] = React.useState(undefined);
    return (
        <Checkbox isChecked={isChecked} hasError onChange={setIsChecked}>
            I accept the Terms of Service
        </Checkbox>
    );
}

function CheckboxExample() {
    const [isChecked, setIsChecked] = React.useState(undefined);
    return (
        <Checkbox isChecked={isChecked} onChange={setIsChecked}>
            <div className="flex">
                <div className="flex-none">
                    <UserAvatar imageUrl="https://randomuser.me/api/portraits/women/63.jpg" />
                </div>
                <div className="pl4 flex items-center" 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>
        </Checkbox>
    );
}

function CheckboxExample() {
    const [isChecked, setIsChecked] = React.useState(undefined);
    return (
        <Checkbox isChecked={isChecked} onChange={setIsChecked} checkboxVerticalAlign="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>
        </Checkbox>
    );
}

class CheckboxExample extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isChecked: undefined,
        };
        this.onChange = this.onChange.bind(this);
    }
    onChange(isChecked) {
        this.setState({ isChecked });
    }
    render() {
        return (
            <Checkbox isChecked={this.state.isChecked} onChange={this.onChange}>
                Send me promotional emails
            </Checkbox>
        );
    }
}