Input | Community Components - 21st | 21st

/Input/

Input

Upgaraded shadcn/ui Input

Install

npx shadcn@latest add https://21st.dev/r/originui/input

Loading preview...

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { AtSign } from "lucide-react";
import { useId } from "react";

function Component() {
  const id = useId();
  return (
    <div className="space-y-2 min-w-[300px]">
      <Label htmlFor={id}>Input with start icon</Label>
      <div className="relative">
        <Input id={id} className="peer ps-9" placeholder="Email" type="email" />
        <div className="pointer-events-none absolute inset-y-0 start-0 flex items-center justify-center ps-3 text-muted-foreground/80 peer-disabled:opacity-50">
          <AtSign size={16} strokeWidth={2} aria-hidden="true" />
        </div>
      </div>
    </div>
  );
}

export { Component };

More examples

DefaultOpen page →

Loading preview...

Required inputOpen page →

Loading preview...

Input with helper textOpen page →

Loading preview...

Input with hintOpen page →

Loading preview...

Input with colored border and ringOpen page →

Loading preview...

Input with errorOpen page →

Loading preview...

Input with gray backgroundOpen page →

Loading preview...

Disabled inputOpen page →

Loading preview...

Input with end iconOpen page →

Loading preview...

Input with start inline add-onOpen page →

Loading preview...

Input with end inline add-onOpen page →

Loading preview...

Input with inline add-onsOpen page →

Loading preview...

Input with start add-onOpen page →

Loading preview...

Input with end add-onOpen page →

Loading preview...

Input with inline start and end add-onOpen page →

Loading preview...

Input with start selectOpen page →

Loading preview...

Input with end selectOpen page →

Loading preview...

Input with end inline buttonOpen page →

Loading preview...

Input with end icon buttonOpen page →

Loading preview...

Input with end buttonOpen page →

Loading preview...

Input with buttonOpen page →

Loading preview...

Show/hide password inputOpen page →

Loading preview...

Input with clear buttonOpen page →

Loading preview...

Search input with <kbd>Open page →

Loading preview...

Search input with icon and buttonOpen page →

Loading preview...

Search input with loaderOpen page →

Loading preview...

Number input with plus/minus buttonsOpen page →

Loading preview...

Number input with chevronsOpen page →

Loading preview...

File inputOpen page →

Loading preview...

Input with overlapping labelOpen page →

Loading preview...

Input with label animationOpen page →

Loading preview...

Input with inset labelOpen page →

Loading preview...

Input with character limitOpen page →

Loading preview...

Input with characters leftOpen page →

Loading preview...

Date inputOpen page →

Loading preview...

Time inputOpen page →

Loading preview...

Time input with start iconOpen page →

Loading preview...

Date and time inputOpen page →

Loading preview...

Date range picker (unavailable dates)Open page →

Loading preview...

OTP input singleOpen page →

Loading preview...

OTP input doubleOpen page →

Loading preview...

OTP input (spaced)Open page →

Loading preview...

Card Number InputOpen page →

Loading preview...

Credit card expiry date inputOpen page →

Loading preview...

Credit card CVC code inputOpen page →

Loading preview...

Credit Card Details InputOpen page →

Loading preview...

Input with password strength indicatorOpen page →

Loading preview...

Read-only inputOpen page →

Loading preview...

Input with maskOpen page →

Loading preview...

Time input with maskOpen page →

Loading preview...

Input with RangeOpen page →

Loading preview...

Source

Published

1/20/2025

Similar components