---
title: "Custom Steps"
slug: "custom-steps"
category: "Widgets"
reactComponent: "ArcWidgetSteps"
reactTier: "mini"
reactSince: "0.1.0-alpha.5"
reactExample: "steps.tsx"
locale: "es"
hosts: "react"
---

# Steps en React

Muestra el progreso en un formulario de varios pasos. La navegación y la validación las controlas en React.

Referencia para `@arcrider/arcwidgets-react@0.1.0-alpha.5`. [Instalación](/docs/react/intro/setup-react) · [Todos los componentes](/docs/react/intro/react-components).

## Ejemplo completo

```tsx
import { ArcWidgetSteps } from '@arcrider/arcwidgets-react';
import { useState } from 'react';

const lang = document.documentElement.lang.startsWith('en')
  ? 'en'
  : document.documentElement.lang.startsWith('es')
    ? 'es'
    : 'de';
const requested = new URLSearchParams(location.search).get('data');
const pack = requested === 'empty' || requested === 'busy' ? requested : 'demo';
const t = (de: string, en: string, es: string) =>
  lang === 'en' ? en : lang === 'es' ? es : de;

const demoSteps = [
  { title: t('Eingabe', 'Input', 'Entrada'), color: '#d97706' },
  { title: t('Prüfung', 'Review', 'Revisión'), color: '#0f766e' },
  { title: t('Abschluss', 'Done', 'Cierre'), color: '#15803d' },
];

const busySteps = [
  ...demoSteps.slice(0, 2),
  { title: t('Freigabe', 'Approval', 'Aprobación'), color: '#7c3aed' },
  demoSteps[2],
];

const steps = pack === 'empty' ? [] : pack === 'busy' ? busySteps : demoSteps;

export default function Example() {
  const [step, setStep] = useState(0);
  return (
    <>
      <ArcWidgetSteps
        data={{
          settings: {
            height: '100px',
            stepWidth: '140px',
          },
          steps: steps.map((item, index) => ({
            title: item.title,
            value: String(index + 1),
            clickable: true,
            backgroundColor: index === step ? item.color : '#f4f4f5',
            fontColor: index === step ? '#ffffff' : '#18181b',
          })),
        }}
        onClick={(_event, index) => setStep(index)}
      />
      <p aria-live="polite">
        {t('Schritt', 'Step', 'Paso')} {steps.length ? step + 1 : 0}
      </p>
    </>
  );
}
```

## Props del componente

### id

ID opcional y estable de la instancia del widget. Sin especificarlo, React genera un ID.

### data

Configuración de tipo `ArcWidgetStepsData`. Pasa los cambios como objetos nuevos; gestiona los datos de negocio y la selección en el estado de React.

### onAction

Fallback opcional `(type: string, ...args: unknown[]) => unknown`. El callback concreto tiene prioridad. Detalles: [Estado y eventos](/docs/react/patterns/react-state-events).

### onClick

Notifica el clic. Ten en cuenta los argumentos específicos del widget más abajo.

```typescript
onClick?: (event: unknown, stepIndex: number) => void;
```

## Configuración

Los siguientes campos pertenecen a `data`. Los tamaños se indican como strings, los números y valores de tiempo según su tipo respectivo.

### settings

Representación común de las entradas.

Tipo: `ArcWidgetStepsSettings`.

### steps

Pasos con título, estado y clicabilidad opcional.

Tipo: `ArcWidgetStepsStep[]`.

## Comportamiento y límites

- Deriva la etiqueta y los colores de cada paso a partir de tu estado; los pasos clicables necesitan `clickable: true`.

- `onClick(event, stepIndex)` notifica el paso pulsado. Comprueba las entradas del paso actual antes de cambiar.

Los campos `ArcWidgetSlot` admitidos permiten elementos JSX individuales, texto o descriptores de widget. Pasa texto externo como texto JSX; los strings HTML se interpretan como HTML. [Combinar contenidos](/docs/react/patterns/nested-widget-descriptors).

## Tipos de datos

Estos tipos relacionados con el widget se exportan desde el paquete. También están disponibles tipos comunes como `ArcWidgetSlot`, `ArcWidgetStyles` y `ArcReactWidgetProps`. Las firmas de índice permiten extensiones; no garantizan que el widget evalúe campos arbitrarios.

```typescript
export interface ArcWidgetStepsSettings {
	embedded?: boolean;
	height?: string;
	colorLabel?: string;
	fontSizeLabel?: string;
	colorValue?: string;
	fontSizeValue?: string;
	backgroundColor?: string;
	borderColor?: string;
	alignX?: 'left' | 'center' | 'right' | string;
	stepWidth?: string;
	gapY?: string;
	stepRadius?: string;
	connectionLine?: {
		show?: boolean;
		height?: string;
	};
	[key: string]: unknown;
}

export interface ArcWidgetStepsStep {
	title?: string;
	value?: string;
	subtitle?: string;
	colorLabel?: string;
	fontSizeLabel?: string;
	colorValue?: string;
	fontSizeValue?: string;
	backgroundColor?: string;
	width?: string;
	clickable?: boolean;
}

export interface ArcWidgetStepsData extends Omit<ArcWidgetBaseData, 'actions'> {
	settings?: ArcWidgetStepsSettings;
	steps?: ArcWidgetStepsStep[];
}

export interface ArcWidgetStepsProps extends ArcReactWidgetProps<ArcWidgetStepsData> {
	onClick?: (event: unknown, stepIndex: number) => void;
}
```