# Patrones - Avanzar y retroceder. DESY. Sistema de diseño del Gobierno de Aragón.

## Patrones Índice de páginas

Patrones

# Avanzar y retroceder

Ayudar a navegar y encontrar

Navegar entre un formulario con varios pasos.

## Casos de uso

-   [Siguiente paso y volver](#vertical)
-   [Siguiente paso y saltar](#horizontal-con-misma-altura)

## Siguiente paso y volver [#](#siguiente-paso-y-volver)

### Junto a la cabecera [#](#junto-a-la-cabecera)

En la parte superior de la página, junto a un encabezado en los [patrones de títulos y encabezados](patronwa-titulo-encabezados).

## Acciones de página

-   Siguiente paso
-   Volver

Mostrar código del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-volver.njk

## Contenido

Nunjucks macro del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-volver.njk HTML del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-volver.njk

### Nunjucks macro del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-volver.njk

```js
{% from "components/button/_macro.button.njk" import componentButton %}

<section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-siguiente-paso-restaurar">
  <h2 id="acciones-de-pagina-siguiente-paso-restaurar" class="sr-only">Acciones de página</h2>
  <ul class="flex flex-col-reverse lg:flex-row-reverse flex-wrap gap-sm">
    <li>
      {{ componentButton({
      "text": "Siguiente paso",
      "classes": "c-button--primary",
      "type": "submit"
      })  }}
    </li>
    <li>
      {{ componentButton({
      "text": "Volver"
      })  }}
    </li>
  </ul>
</section>
```

### HTML del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-volver.njk

```html
<section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-siguiente-paso-restaurar">
  <h2 id="acciones-de-pagina-siguiente-paso-restaurar" class="sr-only">Acciones de página</h2>
  <ul class="flex flex-col-reverse lg:flex-row-reverse flex-wrap gap-sm">
    <li>
      <!-- button -->
      <button type="submit" class="c-button c-button--primary">
        Siguiente paso
      </button>
      <!-- /button -->
    </li>
    <li>
      <!-- button -->
      <button class="c-button">
        Volver
      </button>
      <!-- /button -->
    </li>
  </ul>
</section>
```

### Bajo el formulario [#](#bajo-el-formulario)

Seguido de los inputs de un formulario. Es la opción más habitual.

## Acciones de página

-   Volver
-   Siguiente paso

Mostrar código del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-volver-2.njk

## Contenido

Nunjucks macro del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-volver-2.njk HTML del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-volver-2.njk

### Nunjucks macro del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-volver-2.njk

```js
{% from "components/button/_macro.button.njk" import componentButton %}

<section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-siguiente-paso-restaurar">
  <h2 id="acciones-de-pagina-siguiente-paso-restaurar" class="sr-only">Acciones de página</h2>
  <ul class="flex flex-col lg:flex-row flex-wrap gap-sm">
    <li>
      {{ componentButton({
      "text": "Volver"
      })  }}
    </li>
    <li>
      {{ componentButton({
      "text": "Siguiente paso",
      "classes": "c-button--primary",
      "type": "submit"
      })  }}
    </li>
  </ul>
</section>
```

### HTML del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-volver-2.njk

```html
<section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-siguiente-paso-restaurar">
  <h2 id="acciones-de-pagina-siguiente-paso-restaurar" class="sr-only">Acciones de página</h2>
  <ul class="flex flex-col lg:flex-row flex-wrap gap-sm">
    <li>
      <!-- button -->
      <button class="c-button">
        Volver
      </button>
      <!-- /button -->
    </li>
    <li>
      <!-- button -->
      <button type="submit" class="c-button c-button--primary">
        Siguiente paso
      </button>
      <!-- /button -->
    </li>
  </ul>
</section>
```

## Siguiente paso y saltar [#](#siguiente-paso-y-saltar)

Cuando un paso del formulario no es obligatorio, debemos ofrecer a la persona poder saltarlo y cumplimentarlo más tarde.

## Acciones de página

-   Siguiente paso
-   Saltar

Mostrar código del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-saltar.njk

## Contenido

Nunjucks macro del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-saltar.njk HTML del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-saltar.njk

### Nunjucks macro del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-saltar.njk

```js
{% from "components/button/_macro.button.njk" import componentButton %}

<section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-siguiente-paso-restaurar">
  <h2 id="acciones-de-pagina-siguiente-paso-restaurar" class="sr-only">Acciones de página</h2>
  <ul class="flex flex-col lg:flex-row flex-wrap gap-sm">
    <li>
      {{ componentButton({
      "text": "Siguiente paso",
      "classes": "c-button--primary",
      "type": "submit"
      })  }}
    </li>
    <li>
      {{ componentButton({
      "text": "Saltar",
      "classes": "c-button--transparent"
      })  }}
    </li>
  </ul>
</section>
```

### HTML del ejemplo: includes/\_pattern.acciones-de-pagina-siguiente-paso-y-saltar.njk

```html
<section class="mt-base mb-base lg:mt-0 lg:mb-0 lg:ml-auto lg:pl-base" aria-labelledby="acciones-de-pagina-siguiente-paso-restaurar">
  <h2 id="acciones-de-pagina-siguiente-paso-restaurar" class="sr-only">Acciones de página</h2>
  <ul class="flex flex-col lg:flex-row flex-wrap gap-sm">
    <li>
      <!-- button -->
      <button type="submit" class="c-button c-button--primary">
        Siguiente paso
      </button>
      <!-- /button -->
    </li>
    <li>
      <!-- button -->
      <button class="c-button c-button--transparent">
        Saltar
      </button>
      <!-- /button -->
    </li>
  </ul>
</section>
```

## Qué componentes utilizamos [#](#qu-componentes-utilizamos)

-   [Botón](componente-botones.html)
    -   El botón primario es el que permite avanzar y se encuentra a la derecha. El botón volver es un botón por defecto a la izquierda. El botón de saltar es transparente y se coloca a la derecha.

## Accesibilidad [#](#accesibilidad)

-   Las acciones deben estar dentro de un elemento `<section>` y tener un encabezado con `.sr-only` que las describa.
-   El grupo se maqueta como una lista `<ul>`
-   En caso de que el siguiente paso suponga el envío de un formulario, todo este patrón deberá estar contenido en una etiqueta `<form>`