Volver a inicio

Select Component

Componente web personalizado para crear menús desplegables con funcionalidad de selección y opciones de personalización completa. Perfecto para formularios, filtros y selección de opciones.

Personalizable
Controlable por JavaScript
Múltiples temas

Ejemplos de uso

Select básico con opciones simples

Selecciona una categoría
  • Electrónica
  • Ropa
  • Hogar
  • Deportes

Código HTML

<!-- Importar el componente -->
<script src="select-component/index.js"></script>
<link rel="stylesheet" href="select-component/index.css">

<!-- Implementación básica -->
<select-component>
  <details class="select-component" data-select-details>
    <summary class="select-component-button">
      <span data-select-label>Selecciona una categoría</span>
      <span class="select-component-button-asset">
        <svg>...</svg>
      </span>
    </summary>
    <ul class="select-component-dropdown">
      <li data-index="0" data-value="electronica" data-select-option>
        Electrónica
      </li>
      <li data-index="1" data-value="ropa" data-select-option>
        Ropa
      </li>
      <!-- Más opciones... -->
    </ul>
  </details>
</select-component>

Select con cierre automático

Selecciona un país
  • España
  • México
  • Argentina
  • Chile
  • Colombia

Código HTML

<!-- Select con cierre automático -->
<select-component data-close-dropdown-after-selected>
  <details class="select-component" data-select-details>
    <summary class="select-component-button">
      <span data-select-label>Selecciona un país</span>
      <span class="select-component-button-asset">
        <svg>...</svg>
      </span>
    </summary>
    <ul class="select-component-dropdown">
      <li data-index="0" data-value="es" data-select-option>
        España
      </li>
      <!-- Más opciones... -->
    </ul>
  </details>
</select-component>

Select con opción preseleccionada

Nivel de experiencia
  • Principiante
  • Intermedio
  • Avanzado
  • Experto

Código HTML

<!-- Select con opción preseleccionada -->
<select-component>
  <details class="select-component" data-select-details>
    <summary class="select-component-button">
      <span data-select-label>Nivel de experiencia</span>
      <span class="select-component-button-asset">
        <svg>...</svg>
      </span>
    </summary>
    <ul class="select-component-dropdown">
      <li data-index="0" data-value="principiante" data-select-option>
        Principiante
      </li>
      <li class="selected" data-index="1" data-value="intermedio" 
          data-select-option>
        Intermedio
      </li>
      <!-- Más opciones... -->
    </ul>
  </details>
</select-component>

Select con diferentes estilos

Estilo Material

Selecciona un color
  • Rojo
  • Verde
  • Azul
  • Amarillo

Estilo Redondeado

Selecciona un tamaño
  • Pequeño (S)
  • Mediano (M)
  • Grande (L)
  • Extra Grande (XL)

Estilo Oscuro

Selecciona un idioma
  • Español
  • Inglés
  • Francés
  • Alemán

Personalización con CSS

/* Estilo Material */
.select-component-page .select-component.select-material {
  --select-padding: 12px 16px;
  --select-border: none;
  --select-border-radius: 4px;
  --select-background-color: rgba(255, 255, 255, 0.06);
  --select-dropdown-border: none;
  --select-dropdown-border-radius: 4px;
  --select-dropdown-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Estilo Redondeado */
.select-component-page .select-component.select-rounded {
  --select-border-radius: 50px;
  --select-padding: 10px 20px;
  --select-dropdown-border-radius: 8px;
}

/* Estilo Oscuro */
.select-component-page .select-component.select-dark {
  --select-background-color: rgba(0, 0, 0, 0.4);
  --select-border: 1px solid rgba(255, 255, 255, 0.1);
  --select-border-radius: 4px;
  --select-dropdown-background-color: #333;
  --select-dropdown-border: 1px solid rgba(255, 255, 255, 0.1);
  --select-dropdown-border-radius: 4px;
  --select-dropdown-option-selected-background-color: 
    rgba(233, 30, 99, 0.3);
}

HTML

<!-- Ejemplo con estilo Material -->
<select-component>
  <details class="select-component select-material" 
           data-select-details>
    <!-- Contenido del select... -->
  </details>
</select-component>

<!-- Ejemplo con estilo Redondeado -->
<select-component>
  <details class="select-component select-rounded" 
           data-select-details>
    <!-- Contenido del select... -->
  </details>
</select-component>

<!-- Ejemplo con estilo Oscuro -->
<select-component>
  <details class="select-component select-dark" 
           data-select-details>
    <!-- Contenido del select... -->
  </details>
</select-component>
Ver documentación completa