51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
interface TextShortFieldProps {
|
|
name: string
|
|
label: string
|
|
value: string
|
|
required: boolean
|
|
placeholder?: string
|
|
onChange: (value: string) => void
|
|
error?: string
|
|
}
|
|
|
|
export function TextShortField({
|
|
name,
|
|
label,
|
|
value,
|
|
required,
|
|
placeholder = '',
|
|
onChange,
|
|
error,
|
|
}: TextShortFieldProps) {
|
|
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>
|
|
<input
|
|
type="text"
|
|
id={name}
|
|
name={name}
|
|
value={value}
|
|
required={required}
|
|
aria-required={required}
|
|
aria-describedby={error ? `${name}-error` : undefined}
|
|
aria-invalid={!!error}
|
|
placeholder={placeholder}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
className="text-short-input"
|
|
autoComplete="off"
|
|
/>
|
|
{error && (
|
|
<p role="alert" className="field-error" id={`${name}-error`}>
|
|
{error}
|
|
</p>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|