Instrumento v2: 44 preguntas + widget text_short

components/widgets/text-short-field.tsx

@@ -0,0 +1,50 @@
+'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>
+  )
+}