33 lines
871 B
TypeScript
33 lines
871 B
TypeScript
import { forwardRef } from 'react';
|
|
|
|
import { Input } from '../ui/input';
|
|
import type { InputProps } from '../ui/input';
|
|
import { Label } from '../ui/label';
|
|
|
|
type InputWithLabelProps = InputProps & {
|
|
label: string;
|
|
error?: string | undefined;
|
|
};
|
|
|
|
export const InputWithLabel = forwardRef<HTMLInputElement, InputWithLabelProps>(
|
|
({ label, className, ...props }, ref) => {
|
|
return (
|
|
<div className={className}>
|
|
<div className="block mb-2 flex justify-between">
|
|
<Label className="mb-0" htmlFor={label}>
|
|
{label}
|
|
</Label>
|
|
{props.error && (
|
|
<span className="text-sm text-destructive leading-none">
|
|
{props.error}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<Input ref={ref} id={label} {...props} />
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
InputWithLabel.displayName = 'InputWithLabel';
|