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

function Component() {
  const id = useId();
  return (
    <div className="relative min-w-[300px] rounded-lg border border-input bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 [&:has(input:is(:disabled))_*]:pointer-events-none">
      <label htmlFor={id} className="block px-3 pt-2 text-xs font-medium text-foreground">
        Input with inset label
      </label>
      <input
        id={id}
        className="flex h-10 w-full bg-transparent px-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none"
        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 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 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 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