Input

1import { Input } from '@/components/ui/input';
2
3export function Default() {
4  return (
5    <div className="w-full max-w-sm">
6      <Input aria-label="Workspace name" placeholder="Northwind Labs" />
7    </div>
8  );
9}

1import { Input } from '@/components/ui/input';
2
3export function Default() {
4  return (
5    <div className="w-full max-w-sm">
6      <Input aria-label="Workspace name" placeholder="Northwind Labs" />
7    </div>
8  );
9}

1import { Input } from '@/components/ui/input';
2
3export function WithLabel() {
4  return (
5    <div className="w-full max-w-sm">
6      <Input
7        label="Work email"
8        description="Invoices and deploy alerts are sent here."
9        placeholder="you@northwindlabs.com"
10        type="email"
11      />
12    </div>
13  );
14}

1import { Button } from '@/components/ui/button';
2import { Input } from '@/components/ui/input';
3
4export function WithError() {
5  return (
6    <div className="border-border bg-card flex w-full max-w-sm flex-col gap-4 rounded-xl border p-5">
7      <div>
8        <p className="text-sm font-medium">Invite a teammate</p>
9        <p className="text-muted-foreground text-xs">
10          They get access to the Northwind Labs workspace.
11        </p>
12      </div>
13      <Input
14        label="Work email"
15        type="email"
16        defaultValue="marco@northwind"
17        error="Enter a full address, like marco@northwindlabs.com"
18      />
19      <Button size="sm" className="self-start">
20        Send invite
21      </Button>
22    </div>
23  );
24}

1import { Search01Icon, ViewIcon } from '@hugeicons/core-free-icons';
2import { HugeiconsIcon } from '@hugeicons/react';
3import { Input } from '@/components/ui/input';
4
5export function WithIcon() {
6  return (
7    <div className="flex w-full max-w-sm flex-col gap-4">
8      <Input
9        aria-label="Search customers"
10        placeholder="Search customers and invoices"
11        leftIcon={<HugeiconsIcon icon={Search01Icon} size={16} />}
12      />
13      <Input
14        label="Password"
15        type="password"
16        placeholder="At least 12 characters"
17        rightIcon={<HugeiconsIcon icon={ViewIcon} size={16} />}
18      />
19    </div>
20  );
21}

1import { Input } from '@/components/ui/input';
2
3const fields = [
4  { size: 'sm' as const, label: 'Coupon code', placeholder: 'SPRING25' },
5  { size: 'default' as const, label: 'Project name', placeholder: 'Checkout redesign' },
6  { size: 'lg' as const, label: 'Search', placeholder: 'Search orders, customers, invoices' },
7];
8
9export function Sizes() {
10  return (
11    <div className="flex w-full max-w-sm flex-col gap-4">
12      {fields.map((field) => (
13        <Input
14          key={field.size}
15          size={field.size}
16          label={field.label}
17          placeholder={field.placeholder}
18        />
19      ))}
20    </div>
21  );
22}

1import { Input } from '@/components/ui/input';
2
3export function Disabled() {
4  return (
5    <div className="w-full max-w-sm">
6      <Input
7        label="Billing email"
8        description="Only the workspace owner can change this address."
9        type="email"
10        defaultValue="billing@northwindlabs.com"
11        disabled
12      />
13    </div>
14  );
15}