Estilos

Componentes

Formularios

Organismos

Pasos de un formulario

Es un indicador de progreso que muestra visualmente los pasos de las acciones del usuario en un formulario. Los ayuda a comprender la progresión de los formularios largos y reduce la incertidumbre a medida que completan cada pantalla.

Estamos actualizando todas las fichas de los componentes. Para conocer más sobre los lineamientos de uso del componente podés visitar la documentación en Obelisco v.1.

Pasos de un formulario

Nombre del paso

Paso siguiente: Nombre del paso 3

Paso 2 de 5

<div class="stepper-content">
  <div class="stepper">
    <h2 class="step-title">Nombre del paso</h2>
    <p class="step-subtitle">Paso siguiente: Nombre del paso 3</p>
    <div class="steps">
      <div class="steps-items">
        <div class="steps-item active"></div>
        <div class="steps-item active"></div>
        <div class="steps-item"></div>
        <div class="steps-item"></div>
        <div class="steps-item"></div>
      </div>
      <span class="steps-detail">Paso 2 de 5</span>
    </div>
  </div>
</div>

Con volanta

Volanta con información adicional

Nombre del paso

Paso siguiente: Nombre del paso 3

Paso 2 de 5

<div class="stepper-content">
  <div class="stepper">
    <p class="step-volanta">Volanta con información adicional</p>
    <h2 class="step-title">Nombre del paso</h2>
    <p class="step-subtitle">Paso siguiente: Nombre del paso 3</p>
    <div class="steps">
      <div class="steps-items">
        <div class="steps-item active"></div>
        <div class="steps-item active"></div>
        <div class="steps-item"></div>
        <div class="steps-item"></div>
        <div class="steps-item"></div>
      </div>
      <span class="steps-detail">Paso 2 de 5</span>
    </div>
  </div>
</div>

Variantes

Navegación de pie de página