Input

"use client";

import { Search } from "lucide-react";

import { Input } from "@/registry/base/ui/input";

export default function Input01() {
  return (
    <div className="relative w-full max-w-sm">
      <Search
        aria-hidden="true"
        className="pointer-events-none absolute top-1/2 left-2.5 size-4 -translate-y-1/2 text-muted-foreground"
      />
      <Input type="search" placeholder="Search components…" className="pl-8" />
    </div>
  );
}

"use client";

import { Field, FieldError, FieldLabel } from "@/registry/base/ui/field";
import { Input } from "@/registry/base/ui/input";

export default function Input02() {
  return (
    <div className="w-full max-w-sm">
      <Field name="email" invalid>
        <FieldLabel>Email address</FieldLabel>
        <Input type="email" defaultValue="maya@sevenui" />
        <FieldError>Enter a valid email address.</FieldError>
      </Field>
    </div>
  );
}

"use client";

import * as React from "react";
import { Eye, EyeOff } from "lucide-react";

import { Button } from "@/registry/base/ui/button";
import { Input } from "@/registry/base/ui/input";
import { Label } from "@/registry/base/ui/label";

export default function Input03() {
  const [visible, setVisible] = React.useState(false);

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="input-03-password">Password</Label>
      <div className="relative">
        <Input
          id="input-03-password"
          type={visible ? "text" : "password"}
          defaultValue="sevenui-secret"
          className="pr-9"
        />
        <Button
          type="button"
          variant="ghost"
          size="icon-sm"
          className="absolute top-1/2 right-1 -translate-y-1/2"
          aria-label={visible ? "Hide password" : "Show password"}
          onClick={() => setVisible((prev) => !prev)}
        >
          {visible ? <EyeOff aria-hidden="true" /> : <Eye aria-hidden="true" />}
        </Button>
      </div>
    </div>
  );
}

"use client";

import { Input } from "@/registry/base/ui/input";
import { Label } from "@/registry/base/ui/label";

export default function Input04() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <div className="flex flex-col gap-2">
        <Label htmlFor="input-04-url">Website</Label>
        <div className="flex">
          <span className="flex items-center rounded-l-lg border border-r-0 border-input bg-muted px-2.5 text-sm text-muted-foreground">
            https://
          </span>
          <Input id="input-04-url" defaultValue="sevenui.dev" className="rounded-l-none" />
        </div>
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="input-04-price">Price</Label>
        <div className="flex">
          <Input
            id="input-04-price"
            type="text"
            inputMode="decimal"
            defaultValue="49.00"
            className="rounded-r-none"
          />
          <span className="flex items-center rounded-r-lg border border-l-0 border-input bg-muted px-2.5 text-sm text-muted-foreground">
            USD
          </span>
        </div>
      </div>
    </div>
  );
}