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

49 lines
2.0 KiB
TypeScript
Raw Normal View History

2024-01-25 22:43:42 +03:00
"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/>
2024-01-25 22:43:42 +03:00
<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>
);
}