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 { useId } from "react";

function Component() {
  const id = useId();
  return (
    <div className="min-w-[300px] block">
      <div className="mb-2 flex items-center justify-between gap-1">
        <Label htmlFor={id} className="leading-6">
          Input with hint
        </Label>
        <span className="text-sm text-muted-foreground">Optional</span>
      </div>
      <Input id={id} placeholder="Email" type="email" />
    </div>
  );
}

export { Component };

More examples

DefaultOpen page →

Loading preview...

Required inputOpen page →

Loading preview...

Input with helper textOpen 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 start iconOpen 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