Volver a Components

Form Section

<sg-form-section> v0.1.1

Contenedor para secciones de formulario con t铆tulo, icono y indicador de pasos. Proporciona consistencia visual en formularios multi-paso.

Ejemplos

B谩sico
example.html 
<sg-form-section section-title="Informaci贸n Personal">
  <sg-input label="Nombre" placeholder="Tu nombre"></sg-input>
  <sg-input label="Email" class="hl-keyword">type="email" placeholder="tu@email.com"></sg-input>
</sg-form-section>

Con icono y pasos
example.html 
<sg-form-section
  section-title="Datos de Contacto"
  step-number="1"
  total-steps="3"
  icon-bg-class="hl-keyword">class="bg-blue-100">
  <sg-icon slot="icon" name="user" size="20"></sg-icon>
  <sg-input label="Tel茅fono"></sg-input>
  <sg-input label="Direcci贸n"></sg-input>
</sg-form-section>

Colores de fondo

Tu informaci贸n ha sido verificada.

Tienes 3 alertas pendientes.
example.html 
<sg-form-section section-title="Datos" icon-bg-class="hl-keyword">class="bg-green-100">
  <sg-icon slot="icon" name="check" size="20"></sg-icon>
</sg-form-section>
<sg-form-section section-title="Alertas" icon-bg-class="hl-keyword">class="bg-red-100">
  <sg-icon slot="icon" name="alert" size="20"></sg-icon>
</sg-form-section>

Colapsable

Esta secci贸n se puede colapsar haciendo click en el header.
example.html 
<sg-form-section
  section-title="Informaci贸n Adicional"
  collapsible="true"
  collapsed="false">
  <sg-icon slot="icon" name="info" size="20"></sg-icon>
  <p>Esta secci贸n se puede colapsar.</p>
</sg-form-section>

API Reference

Propiedades

6
Prop Tipo Default Descripci贸n
section-title string '' T铆tulo de la secci贸n
step-number number undefined N煤mero del paso actual
total-steps number undefined Total de pasos
icon-bg-class string 'bg-blue-100' Clase CSS para el fondo del icono
collapsible boolean false Hace la secci贸n colapsable
collapsed boolean false Estado inicial colapsado

Slots

2
Slot Descripci贸n
icon Icono para el header de la secci贸n
(default) Contenido de la secci贸n (campos del formulario)

C贸mo usar