Input
Displays a form input field or a component that looks like an input field.
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";