49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
'use client'
|
|
import type { ReactNode } from 'react'
|
|
|
|
interface TextAreaFieldProps {
|
|
name: string
|
|
label: ReactNode
|
|
value: string
|
|
required: boolean
|
|
onChange: (value: string) => void
|
|
error?: string
|
|
}
|
|
|
|
export function TextAreaField({
|
|
name,
|
|
label,
|
|
value,
|
|
required,
|
|
onChange,
|
|
error,
|
|
}: TextAreaFieldProps) {
|
|
return (
|
|
<div className="question-fieldset">
|
|
<label className="question-legend" htmlFor={name}>
|
|
{label}
|
|
{required && <span className="required-mark" aria-hidden="true"> *</span>}
|
|
{required && <span className="sr-only"> (obligatorio)</span>}
|
|
</label>
|
|
<textarea
|
|
id={name}
|
|
name={name}
|
|
value={value}
|
|
rows={4}
|
|
required={required}
|
|
aria-required={required}
|
|
aria-describedby={error ? `${name}-error` : undefined}
|
|
aria-invalid={!!error}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
className="text-area"
|
|
placeholder="Escribí tu respuesta acá (opcional)…"
|
|
/>
|
|
{error && (
|
|
<p role="alert" className="field-error" id={`${name}-error`}>
|
|
{error}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|