Shadcn Input for React

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/input.json

npx shadcn@latest add https://kit.dev/r/aria/input.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/input.json

yarn shadcn@latest add https://kit.dev/r/aria/input.json

bun add react-aria-components

npm install react-aria-components

pnpm add react-aria-components

yarn add react-aria-components

"use client";

import type React from "react";
import {
  composeRenderProps,
  Input as InputPrimitive,
} from "react-aria-components";
import { cn } from "@/lib/utils";

export const Input = (props: React.ComponentProps<typeof InputPrimitive>) => {
  const { className, type = "text", ...rest } = props;

  return (
    <InputPrimitive
      className={composeRenderProps(className, (renderClassName) =>
        cn(
          "cn-input w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
          renderClassName

Usage

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field";
import { Input } from "@/components/ui/input";

<Field className="max-w-xs">
  <FieldLabel>API Key</FieldLabel>
  <Input placeholder="sk-..." type="password" />
  <FieldDescription>
    Your API key is encrypted and stored securely.
  </FieldDescription>
</Field>

Demos

Basic

A basic input.

Field

Use Field, FieldLabel, and FieldDescription to create an input with a label and description.

Field Group

Use FieldGroup to show multiple Field blocks and to build forms.

Disabled

Use the disabled prop to disable the input. To style the disabled state, set disabled on the Field component.

Invalid

Use the aria-invalid prop to mark the input as invalid. To style the invalid state, set invalid on the Field component.

File

Use the type="file" prop to create a file input.

Inline

Use Field with orientation="horizontal" to create an inline input. Pair with Button to create a search input with a button.

Grid

Use a grid layout to place multiple inputs side by side.

Required

Use the required attribute to indicate required inputs.

Badge

Use Badge in the label to highlight a recommended field.

Input Group

To add icons, text, or buttons inside an input, use the InputGroup component.

Button Group

To add buttons to an input, use the ButtonGroup component.

Form

A full form example with multiple inputs, a select, and a button.

Rtl

Right-to-left input. See the RTL configuration guide for document direction.

API Reference