Components

Formulario con piezas React

Formulario con piezas React

Un formulario combina entradas, estado y acciones. Define un estado compartido, valida al confirmar y muestra los errores junto a los campos.

Ejemplo completo

import { useState } from 'react';
import {
  ArcWidgetSteps,
  ArcWidgetInput,
  ArcWidgetButton,
} from '@arcrider/arcwidgets-react';
export default function Example() {
  const [step, setStep] = useState(0);
  const [name, setName] = useState('');
  const [error, setError] = useState('');
  return (
    <>
      <ArcWidgetSteps
        data={{
          settings: {
            height: '100px',
          },
          steps: ['Eingabe', 'Prüfung', 'Abschluss'].map((title, index) => ({
            title,
            value: String(index + 1),
            backgroundColor: index === step ? '#34705b' : '#e5e7eb',
          })),
        }}
      />
      {step === 0 && (
        <ArcWidgetInput
          data={{
            value: name,
            placeholderSettings: {
              value: 'Name',
            },
            liveUpdate: true,
          }}
          onChange={(v) => setName(String(v ?? ''))}
        />
      )}
      {step === 1 && <p>Bitte prüfen: {name}</p>}
      {step === 2 && <p>Erfasst: {name}</p>}
      {step < 2 && (
        <ArcWidgetButton
          data={{
            title: 'Weiter',
            width: '140px',
          }}
          onClick={() => {
            if (!name.trim()) {
              setError('Bitte einen Namen eingeben.');
              return;
            }
            setError('');
            setStep((s) => s + 1);
          }}
        />
      )}
      {step > 0 && (
        <button onClick={() => setStep((s) => s - 1)}>Zurück</button>
      )}
      <p role="status">{error}</p>
    </>
  );
}

Reutilizar

Saca los campos de negocio y la función de guardado como props a tu propio componente. Mantén los widgets ligados a ese estado. El ejemplo usa a propósito también elementos nativos de formulario: arcWidgets se combinan con los componentes React que ya tienes.

Para campos de elección usa <a href="/docs/react/mini-widgets/select">Select</a>, para texto libre <a href="/docs/react/mini-widgets/input">Input</a> y para guardado asíncrono <a href="/docs/react/mini-widgets/buttons">Button</a>.