Field

 1import { IconExclamationCircle, IconMail } from "@tabler/icons-react";
 2import { Button } from "@/components/wensity/button";
 3import { Field, FieldControl } from "@/components/wensity/field";
 4import { Input } from "@/components/wensity/input";
 5
 6export function ErrorFields() {
 7  return (
 8    <div className="space-y-4">
 9      <Field label="Email" required error="Please enter a valid email address.">
10        <FieldControl asChild>
11          <Input type="email" defaultValue="not-an-email" leftIcon={<IconMail stroke={1.75} />} />
12        </FieldControl>
13      </Field>
14      <Field label="Password" required error="Must be at least 8 characters.">
15        <FieldControl asChild>
16          <Input type="password" defaultValue="123" leftIcon={<IconExclamationCircle stroke={1.75} />} />
17        </FieldControl>
18      </Field>
19      <Button className="w-full" disabled>Fix errors to continue</Button>
20    </div>
21  );
22}

 1import { IconCheck, IconMail } from "@tabler/icons-react";
 2import { Button } from "@/components/wensity/button";
 3import { Field, FieldControl } from "@/components/wensity/field";
 4import { Input } from "@/components/wensity/input";
 5
 6export function SuccessFields() {
 7  return (
 8    <div className="space-y-4">
 9      <Field label="Username" success="This username is available.">
10        <FieldControl asChild>
11          <Input defaultValue="ksparth12" leftIcon={<IconCheck stroke={1.75} />} />
12        </FieldControl>
13      </Field>
14      <Field label="Email" success="Verification link sent.">
15        <FieldControl asChild>
16          <Input type="email" defaultValue="parth@wensity.com" leftIcon={<IconMail stroke={1.75} />} />
17        </FieldControl>
18      </Field>
19      <Button className="w-full">Save</Button>
20    </div>
21  );
22}

 1import { IconMail } from "@tabler/icons-react";
 2import { Field, FieldControl } from "@/components/wensity/field";
 3import { Input } from "@/components/wensity/input";
 4import { Select } from "@/components/wensity/select";
 5
 6const roleOptions = [
 7  { label: "Workspace", options: [{ value: "admin", label: "Admin" }, { value: "developer", label: "Developer" }] },
 8];
 9
10export function HorizontalFields() {
11  return (
12    <div className="space-y-5">
13      <Field label="Display name" layout="horizontal">
14        <FieldControl asChild>
15          <Input defaultValue="Parth Sharma" />
16        </FieldControl>
17      </Field>
18      <Field label="Email" layout="horizontal" description="Primary contact address.">
19        <FieldControl asChild>
20          <Input type="email" defaultValue="parth@wensity.com" leftIcon={<IconMail stroke={1.75} />} />
21        </FieldControl>
22      </Field>
23      <Field label="Role" layout="horizontal" optional>
24        <FieldControl asChild>
25          <Select defaultValue="developer" options={roleOptions} />
26        </FieldControl>
27      </Field>
28    </div>
29  );
30}

 1import { IconCheck, IconMail, IconUser } from "@tabler/icons-react";
 2import { Button } from "@/components/wensity/button";
 3import { Field, FieldControl } from "@/components/wensity/field";
 4import { Input } from "@/components/wensity/input";
 5
 6export function AllStates() {
 7  return (
 8    <div className="space-y-4">
 9      <Field label="Full name" required>
10        <FieldControl asChild>
11          <Input placeholder="Your name" leftIcon={<IconUser stroke={1.75} />} />
12        </FieldControl>
13      </Field>
14      <Field label="Team" optional description="Leave blank for a personal account.">
15        <FieldControl asChild>
16          <Input placeholder="Team name" />
17        </FieldControl>
18      </Field>
19      <Field label="Email" required error="This email is already registered.">
20        <FieldControl asChild>
21          <Input type="email" defaultValue="taken@wensity.com" leftIcon={<IconMail stroke={1.75} />} />
22        </FieldControl>
23      </Field>
24      <Field label="Username" success="Great choice, this username is yours.">
25        <FieldControl asChild>
26          <Input defaultValue="ksparth12" leftIcon={<IconCheck stroke={1.75} />} />
27        </FieldControl>
28      </Field>
29      <Button className="w-full">Create account</Button>
30    </div>
31  );
32}