FormField

 1import { IconKey, IconMail } from "@tabler/icons-react";
 2import { Button } from "@/components/wensity/button";
 3import { Checkbox } from "@/components/wensity/checkbox";
 4import {
 5  FormActions,
 6  FormField,
 7  FormFieldControl,
 8} from "@/components/wensity/form-field";
 9import { Input } from "@/components/wensity/input";
10
11export function SignInForm() {
12  return (
13    <div className="space-y-4">
14      <FormField label="Email" required>
15        <FormFieldControl asChild>
16          <Input
17            type="email"
18            autoComplete="email"
19            placeholder="you@company.com"
20            leftIcon={<IconMail stroke={1.75} />}
21          />
22        </FormFieldControl>
23      </FormField>
24      <FormField label="Password" description="Use at least 12 characters." required>
25        <FormFieldControl asChild>
26          <Input
27            type="password"
28            autoComplete="current-password"
29            placeholder="Enter password"
30            leftIcon={<IconKey stroke={1.75} />}
31          />
32        </FormFieldControl>
33      </FormField>
34      <FormActions align="between">
35        <Checkbox label="Remember device" defaultChecked fullWidth={false} />
36        <Button size="sm">Continue</Button>
37      </FormActions>
38    </div>
39  );
40}

 1import { IconBuildingSkyscraper, IconUser } from "@tabler/icons-react";
 2import {
 3  FormField,
 4  FormFieldControl,
 5} from "@/components/wensity/form-field";
 6import { Input } from "@/components/wensity/input";
 7import { Textarea } from "@/components/wensity/textarea";
 8
 9export function ProfileForm() {
10  return (
11    <div className="space-y-5">
12      <FormField
13        layout="split"
14        label="Display name"
15        description="Shown in comments, billing, and shared workspaces."
16        required
17      >
18        <FormFieldControl asChild>
19          <Input defaultValue="Parth Sharma" leftIcon={<IconUser stroke={1.75} />} />
20        </FormFieldControl>
21      </FormField>
22      <FormField
23        layout="split"
24        label="Company"
25        description="Used for invoices and team discovery."
26        optional
27      >
28        <FormFieldControl asChild>
29          <Input placeholder="Acme Inc." leftIcon={<IconBuildingSkyscraper stroke={1.75} />} />
30        </FormFieldControl>
31      </FormField>
32      <FormField
33        layout="split"
34        label="Bio"
35        description="Short internal context for collaborators."
36      >
37        <FormFieldControl asChild>
38          <Textarea minRows={3} resize="none" placeholder="Design systems and component infrastructure." />
39        </FormFieldControl>
40      </FormField>
41    </div>
42  );
43}

 1import { Checkbox } from "@/components/wensity/checkbox";
 2import {
 3  FormField,
 4  FormFieldControl,
 5  FormSection,
 6} from "@/components/wensity/form-field";
 7import { Select } from "@/components/wensity/select";
 8import { Switch } from "@/components/wensity/switch";
 9
10export function WorkspaceControls() {
11  return (
12    <FormSection
13      title="Workspace controls"
14      description="A section wrapper for dense admin settings."
15      divided
16    >
17      <FormField
18        layout="inline"
19        label="Public profile"
20        description="Allow anyone with the link to view the workspace overview."
21      >
22        <FormFieldControl asChild>
23          <Switch defaultChecked label="Enabled" fullWidth={false} />
24        </FormFieldControl>
25      </FormField>
26      <FormField
27        layout="inline"
28        label="Invite permission"
29        description="Choose who can invite new members."
30      >
31        <FormFieldControl asChild>
32          <Select
33            defaultValue="admin"
34            variant="filled"
35            options={[
36              { value: "owner", label: "Owners only" },
37              { value: "admin", label: "Admins and owners" },
38              { value: "member", label: "All members" },
39            ]}
40          />
41        </FormFieldControl>
42      </FormField>
43      <FormField
44        layout="inline"
45        label="Digest"
46        description="Send weekly activity reports to workspace admins."
47      >
48        <FormFieldControl asChild>
49          <Checkbox variant="toggle" defaultChecked label="Weekly" />
50        </FormFieldControl>
51      </FormField>
52    </FormSection>
53  );
54}

 1import { IconMail } from "@tabler/icons-react";
 2import { Button } from "@/components/wensity/button";
 3import {
 4  FormActions,
 5  FormField,
 6  FormFieldControl,
 7} from "@/components/wensity/form-field";
 8import { Input } from "@/components/wensity/input";
 9import { Select } from "@/components/wensity/select";
10import { Textarea } from "@/components/wensity/textarea";
11
12export function TeamInviteForm() {
13  return (
14    <div className="grid gap-4 sm:grid-cols-2">
15      <FormField label="Email" required>
16        <FormFieldControl asChild>
17          <Input type="email" placeholder="alex@company.com" leftIcon={<IconMail stroke={1.75} />} />
18        </FormFieldControl>
19      </FormField>
20      <FormField label="Role" required>
21        <FormFieldControl asChild>
22          <Select
23            defaultValue="developer"
24            options={[
25              { value: "admin", label: "Admin" },
26              { value: "developer", label: "Developer" },
27              { value: "viewer", label: "Viewer" },
28            ]}
29          />
30        </FormFieldControl>
31      </FormField>
32      <FormField
33        className="sm:col-span-2"
34        label="Message"
35        description="Optional context included in the invite email."
36        optional
37      >
38        <FormFieldControl asChild>
39          <Textarea minRows={3} resize="none" placeholder="I added you to help review the new component set." />
40        </FormFieldControl>
41      </FormField>
42      <FormActions className="sm:col-span-2">
43        <Button variant="secondary">Save draft</Button>
44        <Button>Send invite</Button>
45      </FormActions>
46    </div>
47  );
48}

 1import { IconCreditCard, IconMail } from "@tabler/icons-react";
 2import { Button } from "@/components/wensity/button";
 3import {
 4  FormActions,
 5  FormField,
 6  FormFieldControl,
 7} from "@/components/wensity/form-field";
 8import { Input } from "@/components/wensity/input";
 9
10export function BillingContactForm() {
11  return (
12    <div className="space-y-4">
13      <FormField
14        label="Billing email"
15        error="Use a complete company email address."
16        required
17      >
18        <FormFieldControl asChild>
19          <Input type="email" defaultValue="billing@" leftIcon={<IconMail stroke={1.75} />} />
20        </FormFieldControl>
21      </FormField>
22      <FormField label="Payment method" description="Cards are encrypted before storage.">
23        <FormFieldControl asChild>
24          <Input placeholder="4242 4242 4242 4242" leftIcon={<IconCreditCard stroke={1.75} />} />
25        </FormFieldControl>
26      </FormField>
27      <FormActions>
28        <Button variant="destructive">Review errors</Button>
29      </FormActions>
30    </div>
31  );
32}

 1import {
 2  FormField,
 3  FormFieldControl,
 4} from "@/components/wensity/form-field";
 5import { Input } from "@/components/wensity/input";
 6import { Select } from "@/components/wensity/select";
 7import { Switch } from "@/components/wensity/switch";
 8
 9export function TokenFields() {
10  return (
11    <div className="grid gap-3 sm:grid-cols-3">
12      <FormField layout="card" label="API token name" description="Short and searchable.">
13        <FormFieldControl asChild>
14          <Input placeholder="Production deploy" inputSize="sm" />
15        </FormFieldControl>
16      </FormField>
17      <FormField layout="card" label="Scope" description="Least privilege by default.">
18        <FormFieldControl asChild>
19          <Select
20            selectSize="sm"
21            defaultValue="read"
22            options={[
23              { value: "read", label: "Read" },
24              { value: "write", label: "Write" },
25              { value: "admin", label: "Admin", disabled: true },
26            ]}
27          />
28        </FormFieldControl>
29      </FormField>
30      <FormField layout="card" label="Rotation" description="Keep token age low.">
31        <FormFieldControl asChild>
32          <Switch defaultChecked label="90 days" switchSize="sm" />
33        </FormFieldControl>
34      </FormField>
35    </div>
36  );
37}