424 lines
28 KiB
TypeScript
424 lines
28 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import {TextField} from "../../src/primitive-components/text-field/text-field";
|
||
|
|
import {Button} from "../../src/primitive-components/button/button";
|
||
|
|
|
||
|
|
export function TextFields(_props : any) {
|
||
|
|
return (
|
||
|
|
<div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||
|
|
<div>
|
||
|
|
<h1> Inputs </h1>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<h2> Filled Inputs </h2>
|
||
|
|
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||
|
|
<div>
|
||
|
|
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
required/>
|
||
|
|
<Button variant={"filled"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
supportingText={"Supporting text"}/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
required/>
|
||
|
|
<Button variant={"filled"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
withAfterIcon/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
withAfterIcon
|
||
|
|
required/>
|
||
|
|
<Button variant={"filled"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
withAfterIcon
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
withAfterIcon
|
||
|
|
supportingText={"Supporting text"}/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"} withAfterIcon
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
required/>
|
||
|
|
<Button variant={"filled"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
withAfterIcon
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
withBeforeIcon/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
withBeforeIcon
|
||
|
|
required/>
|
||
|
|
<Button variant={"filled"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
withBeforeIcon
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
withBeforeIcon/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
withBeforeIcon
|
||
|
|
required/>
|
||
|
|
<Button variant={"filled"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
withBeforeIcon
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
withBeforeIcon
|
||
|
|
withAfterIcon/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
withBeforeIcon
|
||
|
|
withAfterIcon
|
||
|
|
required/>
|
||
|
|
<Button variant={"filled"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
withBeforeIcon
|
||
|
|
withAfterIcon
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
withBeforeIcon
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
withAfterIcon/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
withBeforeIcon
|
||
|
|
withAfterIcon
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
required/>
|
||
|
|
<Button variant={"filled"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"filled"}
|
||
|
|
type={"email"}
|
||
|
|
withBeforeIcon
|
||
|
|
withAfterIcon
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<h1> Outlined </h1>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<h2> Filled Inputs </h2>
|
||
|
|
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||
|
|
<div>
|
||
|
|
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
required/>
|
||
|
|
<Button variant={"outlined"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
supportingText={"Supporting text"}/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
required/>
|
||
|
|
<Button variant={"outlined"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
withAfterIcon/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
withAfterIcon
|
||
|
|
required/>
|
||
|
|
<Button variant={"outlined"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
withAfterIcon
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
withAfterIcon
|
||
|
|
supportingText={"Supporting text"}/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"} withAfterIcon
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
required/>
|
||
|
|
<Button variant={"outlined"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
withAfterIcon
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
withBeforeIcon/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
withBeforeIcon
|
||
|
|
required/>
|
||
|
|
<Button variant={"outlined"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
withBeforeIcon
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
withBeforeIcon/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
withBeforeIcon
|
||
|
|
required/>
|
||
|
|
<Button variant={"outlined"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
withBeforeIcon
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
withBeforeIcon
|
||
|
|
withAfterIcon/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
withBeforeIcon
|
||
|
|
withAfterIcon
|
||
|
|
required/>
|
||
|
|
<Button variant={"outlined"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
withBeforeIcon
|
||
|
|
withAfterIcon
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div style={{width: "210px", display: "flex", flexDirection: "column", gap: "2em"}}>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
withBeforeIcon
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
withAfterIcon/>
|
||
|
|
</div>
|
||
|
|
<form style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
withBeforeIcon
|
||
|
|
withAfterIcon
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
required/>
|
||
|
|
<Button variant={"outlined"}
|
||
|
|
type={"submit"}>
|
||
|
|
Send
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
<div style={{display: "flex", flexDirection: "column", gap: "0.5em"}}>
|
||
|
|
<TextField variant={"outlined"}
|
||
|
|
type={"email"}
|
||
|
|
withBeforeIcon
|
||
|
|
withAfterIcon
|
||
|
|
supportingText={"Supporting text"}
|
||
|
|
disabled/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|