material-you-react/app/components/checkboxes.tsx

'use client';

import React from 'react';
import { Button, Checkbox } from '../../src/primitive-components/components';

export default function Checkboxes() {
    return (
        <div className={'m3 m3-wrapper'}>
            <h1> Checkboxes </h1>
            <div
                style={{
                    display: 'flex',
                    flexDirection: 'row',
                    width: '100%',
                    gap: '5em',
                    justifyContent: 'center',
                }}
            >
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        gap: '2em',
                    }}
                >
                    <div>
                        <h2> Default </h2>
                        <div style={{ display: 'flex', gap: '2em' }}>
                            <Checkbox centralRipple />
                            <Checkbox defaultChecked />
                            <Checkbox indeterminate={true} />
                        </div>
                    </div>
                    <div>
                        <h2> Disabled </h2>
                        <div style={{ display: 'flex', gap: '2em' }}>
                            <Checkbox disabled />
                            <Checkbox defaultChecked disabled />
                        </div>
                    </div>
                </div>
                <div>
                    <h2> Errored </h2>
                    <form
                        style={{
                            display: 'flex',
                            gap: '2em',
                            flexDirection: 'column',
                        }}
                    >
                        <div
                            style={{
                                display: 'flex',
                                gap: '2em',
                                flexDirection: 'row',
                            }}
                        >
                            <Checkbox required />
                            <Checkbox defaultChecked required />
                            <Checkbox indeterminate={true} required />
                        </div>
                        <div
                            style={{
                                display: 'flex',
                                gap: '2em',
                                flexDirection: 'row',
                            }}
                        >
                            <Checkbox className={'m3-error'} required />
                            <Checkbox
                                className={'m3-error'}
                                defaultChecked
                                required
                            />
                            <Checkbox
                                className={'m3-error'}
                                indeterminate={true}
                                required
                            />
                        </div>
                        <Button type={'submit'}>Send</Button>
                    </form>
                </div>
            </div>
        </div>
    );
}