40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { forwardRef, TextareaHTMLAttributes } from 'react';
|
|
|
|
interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
|
|
label?: string;
|
|
error?: string;
|
|
}
|
|
|
|
export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
({ className = '', label, error, id, ...props }, ref) => {
|
|
const textareaId = id || props.name;
|
|
|
|
return (
|
|
<div className="w-full">
|
|
{label && (
|
|
<label htmlFor={textareaId} className="mb-2 block text-sm font-medium text-foreground">
|
|
{label}
|
|
</label>
|
|
)}
|
|
<textarea
|
|
ref={ref}
|
|
id={textareaId}
|
|
className={`
|
|
w-full rounded-lg border bg-input px-4 py-2.5 text-foreground
|
|
placeholder:text-muted-foreground
|
|
focus:outline-none focus:ring-2 focus:ring-primary/20
|
|
disabled:cursor-not-allowed disabled:opacity-50
|
|
resize-none
|
|
${error ? 'border-destructive focus:border-destructive' : 'border-input-border focus:border-primary'}
|
|
${className}
|
|
`}
|
|
{...props}
|
|
/>
|
|
{error && <p className="mt-1.5 text-sm text-destructive">{error}</p>}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
Textarea.displayName = 'Textarea';
|