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="space-y-2 min-w-[300px]">
      <Label htmlFor={id}>Input with error</Label>
      <Input
        id={id}
        className="border-destructive/80 text-destructive focus-visible:border-destructive/80 focus-visible:ring-destructive/20"
        placeholder="Email"
        type="email"
        defaultValue="invalid@email.com"
      />
      <p className="mt-2 text-xs text-destructive" role="alert" aria-live="polite">
        Email is invalid
      </p>
    </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 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