Input
A highly versatile input component for text fields, search boxes, and forms. Includes support for prefixes, suffixes, validation states, and accessible labels.
Basic Usage
import { Input } from "@repo/ui/components/input";
interface Example1Props {}
export const Example1: React.FC<Example1Props> = ({}) => {
return (
<div className="sm:w-80">
<Input type="email" placeholder="Email" />
</div>
);
};
File Input
import { Input } from "@repo/ui/components/input";
import { Label } from "@repo/ui/components/label";
interface Example2Props {}
export const Example2: React.FC<Example2Props> = ({}) => {
return (
<div className="flex flex-col gap-3 sm:w-80">
<Label htmlFor="picture">Picture</Label>
<Input id="picture" type="file" />
</div>
);
};
Disabled Input Field
import { Input } from "@repo/ui/components/input";
interface Example3Props {}
export const Example3: React.FC<Example3Props> = ({}) => {
return (
<div className="sm:w-80">
<Input type="email" placeholder="Email disabled" disabled={true} />
</div>
);
};
Input with Label
import { Input } from "@repo/ui/components/input";
import { Label } from "@repo/ui/components/label";
interface Example4Props {}
export const Example4: React.FC<Example4Props> = ({}) => {
return (
<div className="flex flex-col gap-3 sm:w-80">
<Label htmlFor="email">Email</Label>
<Input type="email" id="email" placeholder="Email" />
</div>
);
};
Input with Button
import { Button } from "@repo/ui/components/button";
import { Input } from "@repo/ui/components/input";
interface Example5Props {}
export const Example5: React.FC<Example5Props> = ({}) => {
return (
<div className="flex gap-3 sm:w-96">
<Input type="email" placeholder="Email" />
<Button type="submit" className="rounded-lg">
Subscribe
</Button>
</div>
);
};
Component Code
"use client";
import { forwardRef } from "react";
import {
Input as AriaInput,
InputProps as AriaInputProps,
} from "react-aria-components";
import { cn } from "tailwind-variants";
interface InputProps extends AriaInputProps {}
export const Input = forwardRef<HTMLInputElement, InputProps>((props, ref) => {
const { className = "", ...restProps } = props;
return (
<AriaInput
{...restProps}
ref={ref}
className={cn(
"file:text-foreground placeholder:text-muted-foreground",
"selection:bg-primary selection:text-primary-foreground",
"dark:bg-input/30 border-input shadow-xs h-9 w-full min-w-0",
"rounded-md border bg-transparent px-3 py-1 text-base outline-none",
"transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
"disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className,
)}
/>
);
});
Input.displayName = "Input";
GridList
An interactive list component that supports keyboard navigation, single and multiple selection, disabled items, and custom content rendering. Built on React Aria for full accessibility.
Label
An accessible label component for associating text with form controls. Ensures proper reading order and focus management for improved assistive technology support.