English Español Light Dark System

Option

<gstock-option> | GstockOption

Examples

Uso Básico

Las opciones se utilizan dentro de componentes de formulario como select o autocomplete para definir los elementos seleccionables.

Manzana Naranja Plátano Fresa Uva 
<gstock-select label="Seleccionar fruta" value="manzana">
  <gstock-option value="manzana">Manzana</gstock-option>
  <gstock-option value="naranja">Naranja</gstock-option>
  <gstock-option value="platano">Plátano</gstock-option>
  <gstock-option value="fresa">Fresa</gstock-option>
  <gstock-option value="uva">Uva</gstock-option>
</gstock-select>

Prefijo

Usa el atributo prefix para añadir un icono al inicio de la opción. Ideal para categorías o identificadores visuales.

España Francia Alemania Italia Portugal 
<gstock-select label="Seleccionar país" placeholder="Elige un país">
  <gstock-option value="es" prefix="flag-es">España</gstock-option>
  <gstock-option value="fr" prefix="flag-fr">Francia</gstock-option>
  <gstock-option value="de" prefix="flag-de">Alemania</gstock-option>
  <gstock-option value="it" prefix="flag-it">Italia</gstock-option>
  <gstock-option value="pt" prefix="flag-pt">Portugal</gstock-option>
</gstock-select>

Sufijo

Usa el atributo suffix para añadir un icono al final de la opción. Útil para indicadores de estado o acciones.

Pendiente En Progreso Completado Cancelado 
<gstock-select label="Seleccionar estado" placeholder="Elige un estado" value="pendiente">
  <gstock-option value="pendiente" suffix="clock">Pendiente</gstock-option>
  <gstock-option value="progreso" suffix="refresh">En Progreso</gstock-option>
  <gstock-option value="completado" suffix="check">Completado</gstock-option>
  <gstock-option value="cancelado" suffix="x">Cancelado</gstock-option>
</gstock-select>

Prefijo y Sufijo

Puedes combinar ambos atributos para crear opciones más expresivas.

Editar documento Compartir con equipo Descargar archivo Eliminar elemento 
<gstock-select label="Seleccionar acción" placeholder="Elige una acción">
  <gstock-option value="editar" prefix="edit" suffix="arrow-right">Editar documento</gstock-option>
  <gstock-option value="compartir" prefix="share-2" suffix="arrow-right">
    Compartir con equipo
  </gstock-option>
  <gstock-option value="descargar" prefix="download" suffix="arrow-right">
    Descargar archivo
  </gstock-option>
  <gstock-option value="eliminar" prefix="trash-2" suffix="arrow-right">
    Eliminar elemento
  </gstock-option>
</gstock-select>

Con Atributos en Diferentes Tamaños

Email Teléfono Chat 
<div class="option-preview">
  <gstock-option value="option-1" size="small" prefix="mail" suffix="chevron-right">
    Email
  </gstock-option>
  <gstock-option value="option-2" size="small" prefix="phone" suffix="chevron-right">
    Teléfono
  </gstock-option>
  <gstock-option value="option-3" size="small" prefix="message-square" suffix="chevron-right">
    Chat
  </gstock-option>
</div>

<style>
  .option-preview {
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-sm);
  }
</style>
Email Teléfono Chat 
<div class="option-preview">
  <gstock-option value="option-1" size="medium" prefix="mail" suffix="chevron-right">
    Email
  </gstock-option>
  <gstock-option value="option-2" size="medium" prefix="phone" suffix="chevron-right">
    Teléfono
  </gstock-option>
  <gstock-option value="option-3" size="medium" prefix="message-square" suffix="chevron-right">
    Chat
  </gstock-option>
</div>

<style>
  .option-preview {
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-sm);
  }
</style>
Email Teléfono Chat 
<div class="option-preview">
  <gstock-option value="option-1" size="large" prefix="mail" suffix="chevron-right">
    Email
  </gstock-option>
  <gstock-option value="option-2" size="large" prefix="phone" suffix="chevron-right">
    Teléfono
  </gstock-option>
  <gstock-option value="option-3" size="large" prefix="message-square" suffix="chevron-right">
    Chat
  </gstock-option>
</div>

<style>
  .option-preview {
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-sm);
  }
</style>

Tamaños

Usa el atributo size para cambiar el tamaño de la opción. Los tamaños disponibles son small, medium (por defecto), y large.

Opción 1 Opción 2 Opción 3 Opción 1 Opción 2 Opción 3 Opción 1 Opción 2 Opción 3 
<div class="size-demo">
  <gstock-select label="Tamaño pequeño" size="small" value="opcion1">
    <gstock-option value="opcion1" size="small" prefix="star">Opción 1</gstock-option>
    <gstock-option value="opcion2" size="small" prefix="heart">Opción 2</gstock-option>
    <gstock-option value="opcion3" size="small" prefix="bookmark">Opción 3</gstock-option>
  </gstock-select>

  <gstock-select label="Tamaño mediano" size="medium" value="opcion1">
    <gstock-option value="opcion1" size="medium" prefix="star">Opción 1</gstock-option>
    <gstock-option value="opcion2" size="medium" prefix="heart">Opción 2</gstock-option>
    <gstock-option value="opcion3" size="medium" prefix="bookmark">Opción 3</gstock-option>
  </gstock-select>

  <gstock-select label="Tamaño grande" size="large" value="opcion1">
    <gstock-option value="opcion1" size="large" prefix="star">Opción 1</gstock-option>
    <gstock-option value="opcion2" size="large" prefix="heart">Opción 2</gstock-option>
    <gstock-option value="opcion3" size="large" prefix="bookmark">Opción 3</gstock-option>
  </gstock-select>
</div>

<style>
  .size-demo {
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-lg);
  }
</style>

Tamaño Pequeño

Opción pequeña 1 Opción pequeña 2 Opción pequeña 3 
<div class="option-preview">
  <gstock-option size="small">Opción pequeña 1</gstock-option>
  <gstock-option size="small">Opción pequeña 2</gstock-option>
  <gstock-option size="small">Opción pequeña 3</gstock-option>
</div>

<style>
  .option-preview {
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-sm);
  }
</style>

Tamaño Mediano

Opción mediana 1 Opción mediana 2 Opción mediana 3 
<div class="option-preview">
  <gstock-option size="medium">Opción mediana 1</gstock-option>
  <gstock-option size="medium">Opción mediana 2</gstock-option>
  <gstock-option size="medium">Opción mediana 3</gstock-option>
</div>

<style>
  .option-preview {
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-sm);
  }
</style>

Tamaño Grande

Opción grande 1 Opción grande 2 Opción grande 3 
<div class="option-preview">
  <gstock-option size="large">Opción grande 1</gstock-option>
  <gstock-option size="large">Opción grande 2</gstock-option>
  <gstock-option size="large">Opción grande 3</gstock-option>
</div>

<style>
  .option-preview {
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-sm);
  }
</style>

Opciones Deshabilitadas

Usa el atributo disabled para deshabilitar una opción y evitar que sea seleccionada.

Disponible Stock Limitado Agotado Próximamente Descontinuado 
<gstock-select label="Opciones con estado" placeholder="Selecciona una opción" value="disponible">
  <gstock-option value="disponible" prefix="check-circle">Disponible</gstock-option>
  <gstock-option value="limitado" prefix="alert-circle">Stock Limitado</gstock-option>
  <gstock-option value="agotado" prefix="x-circle" disabled>Agotado</gstock-option>
  <gstock-option value="proximamente" prefix="clock" disabled>Próximamente</gstock-option>
  <gstock-option value="descontinuado" prefix="slash" disabled>Descontinuado</gstock-option>
</gstock-select>

Mezcla de Opciones Habilitadas y Deshabilitadas

Opción 1 Opción 2 (deshabilitada) Opción 3 (deshabilitada) Opción 4 
<div class="option-preview">
  <gstock-option>Opción 1</gstock-option>
  <gstock-option disabled>Opción 2 (deshabilitada)</gstock-option>
  <gstock-option disabled>Opción 3 (deshabilitada)</gstock-option>
  <gstock-option>Opción 4</gstock-option>
</div>

<style>
  .option-preview {
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-sm);
  }
</style>

Contenido Personalizado

Puedes usar los slots prefix y suffix para añadir contenido personalizado como iconos, tags u otros elementos HTML.

Laptop Pro 15" Nuevo Tablet Ultra Limitado Smartphone X Popular Smartwatch Series 5 Agotado 
<gstock-select label="Seleccionar producto" placeholder="Buscar y seleccionar">
  <gstock-option value="laptop">
    <gstock-icon slot="prefix" name="monitor"></gstock-icon>
    <strong>Laptop Pro 15"</strong>
    <gstock-tag slot="suffix" variant="success" size="small">Nuevo</gstock-tag>
  </gstock-option>

  <gstock-option value="tablet">
    <gstock-icon slot="prefix" name="tablet"></gstock-icon>
    <strong>Tablet Ultra</strong>
    <gstock-tag slot="suffix" variant="warning" size="small">Limitado</gstock-tag>
  </gstock-option>

  <gstock-option value="smartphone">
    <gstock-icon slot="prefix" name="smartphone"></gstock-icon>
    <strong>Smartphone X</strong>
    <gstock-tag slot="suffix" variant="primary" size="small">Popular</gstock-tag>
  </gstock-option>

  <gstock-option value="smartwatch">
    <gstock-icon slot="prefix" name="watch"></gstock-icon>
    <strong>Smartwatch Series 5</strong>
    <gstock-tag slot="suffix" variant="danger" size="small">Agotado</gstock-tag>
  </gstock-option>
</gstock-select>

Slots Personalizados en Diferentes Tamaños

Email Teléfono Chat 
<div class="option-preview">
  <gstock-option value="option-1" size="small">
    <gstock-icon slot="prefix" name="mail"></gstock-icon>
    Email
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
  <gstock-option value="option-2" size="small">
    <gstock-icon slot="prefix" name="phone"></gstock-icon>
    Teléfono
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
  <gstock-option value="option-3" size="small">
    <gstock-icon slot="prefix" name="message-square"></gstock-icon>
    Chat
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
</div>

<style>
  .option-preview {
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-sm);
  }
</style>
Email Teléfono Chat 
<div class="option-preview">
  <gstock-option value="option-1" size="medium">
    <gstock-icon slot="prefix" name="mail"></gstock-icon>
    Email
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
  <gstock-option value="option-2" size="medium">
    <gstock-icon slot="prefix" name="phone"></gstock-icon>
    Teléfono
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
  <gstock-option value="option-3" size="medium">
    <gstock-icon slot="prefix" name="message-square"></gstock-icon>
    Chat
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
</div>

<style>
  .option-preview {
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-sm);
  }
</style>
Email Teléfono Chat 
<div class="option-preview">
  <gstock-option value="option-1" size="large">
    <gstock-icon slot="prefix" name="mail"></gstock-icon>
    Email
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
  <gstock-option value="option-2" size="large">
    <gstock-icon slot="prefix" name="phone"></gstock-icon>
    Teléfono
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
  <gstock-option value="option-3" size="large">
    <gstock-icon slot="prefix" name="message-square"></gstock-icon>
    Chat
    <gstock-icon slot="suffix" name="chevron-right"></gstock-icon>
  </gstock-option>
</div>

<style>
  .option-preview {
    display: flex;
    flex-direction: column;
    gap: var(--gstock-space-gap-sm);
  }
</style>

Con Autocomplete

Las opciones también funcionan perfectamente dentro del componente autocomplete para crear búsquedas con sugerencias.

Madrid, España Barcelona, España Valencia, España Sevilla, España Bilbao, España Málaga, España Zaragoza, España Murcia, España 
<gstock-autocomplete label="Buscar ciudad" placeholder="Escribe para buscar..." clearable>
  <gstock-option value="madrid" prefix="map-pin">Madrid, España</gstock-option>
  <gstock-option value="barcelona" prefix="map-pin">Barcelona, España</gstock-option>
  <gstock-option value="valencia" prefix="map-pin">Valencia, España</gstock-option>
  <gstock-option value="sevilla" prefix="map-pin">Sevilla, España</gstock-option>
  <gstock-option value="bilbao" prefix="map-pin">Bilbao, España</gstock-option>
  <gstock-option value="malaga" prefix="map-pin">Málaga, España</gstock-option>
  <gstock-option value="zaragoza" prefix="map-pin">Zaragoza, España</gstock-option>
  <gstock-option value="murcia" prefix="map-pin">Murcia, España</gstock-option>
</gstock-autocomplete>