Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | 149x 12956x 12956x 12956x 149x | import { forwardRef, useId, type InputHTMLAttributes } from "react";
import { cn } from "../../lib/utils";
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
error?: string;
}
const Input = forwardRef<HTMLInputElement, InputProps>(
({ className, type, error, id, ...props }, ref) => {
const generatedId = useId();
const errorId = error ? `${id || generatedId}-error` : undefined;
return (
<div className="w-full">
<input
type={type}
id={id}
className={cn(
"flex h-10 w-full rounded-md border border-border-default bg-background-elevated px-3 py-2 text-sm text-foreground-default placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent disabled:cursor-not-allowed disabled:opacity-50",
error && "border-error focus:ring-error",
className,
)}
ref={ref}
aria-invalid={error ? true : undefined}
aria-describedby={errorId}
{...props}
/>
{error && <p id={errorId} className="mt-1 text-sm text-error" role="alert">{error}</p>}
</div>
);
},
);
Input.displayName = "Input";
export { Input };
|