---
title: "Formulario con piezas React"
slug: "react-form"
category: "Components"
hosts: "react"
locale: "es"
reactExample: "recipe-steps.tsx"
---

# 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

```tsx
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 [Select](/docs/react/mini-widgets/select), para texto libre [Input](/docs/react/mini-widgets/input) y para guardado asíncrono [Button](/docs/react/mini-widgets/buttons).