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

"use client"

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

export default function Checkboxes() {

    return (
        <div className={"m3 m3-wrapper"}>
            <h1> Checkboxes </h1>
            <div style={{display: "flex", flexDirection: "column", width: "100%", 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 disabled defaultChecked/>
                    </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 required defaultChecked/>
                            <Checkbox required indeterminate={true}/>
                        </div>
                        <div style={{display: "flex", gap: "2em", flexDirection: "row"}}>
                            <Checkbox required className={"m3-error"}/>
                            <Checkbox required defaultChecked className={"m3-error"}/>
                            <Checkbox required indeterminate={true} className={"m3-error"}/>
                        </div>
                        <Button type={"submit"}>
                            Send
                        </Button>
                    </form>
                </div>
            </div>
        </div>
    );
}