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 37 38 39 40 41 42 43 44 45 46 | 54x 641x 641x 641x 54x | import React from "react";
interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
label?: string;
error?: string;
}
const Input = React.forwardRef<HTMLInputElement, InputProps>(({ label, error, className = "", id, ...props }, ref) => {
const generatedId = React.useId();
const inputId = id ?? generatedId;
return (
<div className="w-full">
{label && (
<label htmlFor={inputId} className="block text-sm font-medium text-ink mb-2">
{label}
{props.required && <span className="text-error-deep">*</span>}
</label>
)}
<input
id={inputId}
aria-invalid={error ? true : undefined}
aria-describedby={error ? `${inputId}-error` : undefined}
className={`
w-full bg-glass border border-hairline rounded-pill px-4 py-3 text-ink
transition-shadow duration-200 ease-gentle
placeholder:text-ink-soft focus:outline-hidden focus-visible:ring-2 focus-visible:ring-primary
focus-visible:border-transparent disabled:opacity-50 disabled:cursor-not-allowed
h-12 min-h-12
${error ? "border-error focus-visible:ring-error" : ""}
${className}
`}
ref={ref}
{...props}
/>
{error && (
<p id={`${inputId}-error`} className="text-error-deep text-sm mt-2">
{error}
</p>
)}
</div>
);
});
Input.displayName = "Input";
export { Input };
|