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 47 48 49 50 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React from 'react';
import classNames from 'classnames';
import './Textarea.css';
interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
label?: string;
error?: string;
helperText?: string;
fullWidth?: boolean;
rows?: number;
}
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
({ label, error, helperText, fullWidth = false, rows = 4, className, ...props }, ref) => {
const textareaId = props.id || `textarea-${Math.random().toString(36).substr(2, 9)}`;
return (
<div className={classNames('textarea-group', { 'w-100': fullWidth })}>
{label && (
<label htmlFor={textareaId} className="form-label">
{label}
{props.required && <span className="text-danger ms-1">*</span>}
</label>
)}
<textarea
ref={ref}
id={textareaId}
rows={rows}
className={classNames(
'form-control',
{
'is-invalid': error,
},
className
)}
{...props}
/>
{error && <div className="invalid-feedback d-block">{error}</div>}
{helperText && !error && (
<div className="form-text">{helperText}</div>
)}
</div>
);
}
);
Textarea.displayName = 'Textarea';
export default Textarea;
|