Input | Community Components - 21st | 21st

/Input/

Input

Upgaraded shadcn/ui Input

Install

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

Loading preview...

"use client";

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useId } from "react";
import { usePaymentInputs } from "react-payment-inputs";

function Component() {
  const id = useId();
  const { getCVCProps } = usePaymentInputs();

  return (
    <div className="space-y-2 min-w-[300px]">
      <Label htmlFor={`cvc-${id}`}>Code</Label>
      <Input {...getCVCProps()} id={`cvc-${id}`} className="[direction:inherit]" />
      <p className="mt-2 text-xs text-muted-foreground" role="region" aria-live="polite">
        Built with{" "}
        <a
          className="underline hover:text-foreground"
          href="https://github.com/medipass/react-payment-inputs"
          target="_blank"
          rel="noopener nofollow"
        >
          React Payment Inputs
        </a>
      </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 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 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...

Dependencies

styled-components react-payment-inputs

Source

Published

1/20/2025

Similar components