File size: 994 Bytes
9308228 | 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 | import { forwardRef, useId } from "react";
import "./Input.css";
export const Input = forwardRef(function Input(
{ label, error, hint, icon = null, id, className = "", ...props },
ref
) {
const generatedId = useId();
const inputId = id || generatedId;
return (
<div className={`dw-field ${className}`}>
{label && (
<label htmlFor={inputId} className="dw-field__label">
{label}
</label>
)}
<div className={`dw-field__control ${error ? "dw-field__control--error" : ""}`}>
{icon && <span className="dw-field__icon">{icon}</span>}
<input ref={ref} id={inputId} {...props} />
</div>
{error ? (
<span className="dw-field__message dw-field__message--error">{error}</span>
) : hint ? (
<span className="dw-field__message">{hint}</span>
) : null}
</div>
);
});
|