English Español Light Dark System

Select

<gstock-select> | GstockSelect

Examples

Tamaño

Utilice el atributo de size para cambiar el tamaño del componente.

Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 
<gstock-select size="small" placeholder="Small">
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

<gstock-select size="medium" placeholder="Medium">
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

<gstock-select size="large" placeholder="Large">
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

Marcador de posición

Utilice el atributo placeholder para agregar un marcador de posición.

Option 1 Option 2 Option 3 
<gstock-select placeholder="This is a placeholder...">
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

Deshabilitado

Utilice el atributo disabled para deshabilitar el componente.

Option 1 Option 2 Option 3 
<gstock-select placeholder="This select is disabled" disabled>
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

Solo lectura

Utilice el atributo readonly para permitir leer el valor y no modificarlo.

Option 1 Option 2 Option 3 
<gstock-select readonly value="option-2">
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

Label and help text

Use the label and help-text attribute to give the select more accessible.

Option 1 Option 2 Option 3 
<gstock-select label="Label:" help-text="This is a test help-text.">
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

For custom labels and help texts with HTML, use the label and help-text slots.

Custom help-text with a link. Option 1 Option 2 Option 3 
<gstock-select>
  <label slot="label" style="display: inline-flex; gap: 4px">
    <gstock-icon name="edit" size="small"></gstock-icon> Custom label:
  </label>
  <span slot="help-text"> Custom help-text with a <a href="#label-and-help-text">link</a>. </span>
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

Clearable

Use the clearable attribute to add a clear button when the select has content.

Option 1 Option 2 Option 3 
<gstock-select value="option-1" clearable>
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

Prefix and suffix

Use the prefix and suffix attributes to add icons.

Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 
<gstock-select placeholder="Small" size="small" prefix="search" suffix="star" style="margin-bottom: 1rem">
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

<gstock-select placeholder="Medium" size="medium" prefix="search" suffix="star" style="margin-bottom: 1rem">
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

<gstock-select placeholder="Large" size="large" prefix="search" suffix="star" style="margin-bottom: 1rem">
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

For custom prefixes and suffixes with HTML, use the prefix and suffix slots.

Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 Option 1 Option 2 Option 3 
<gstock-select placeholder="Small" size="small" style="margin-bottom: 1rem">
  <span slot="prefix" class="input__prefix">
    <gstock-icon name="search" size="small"></gstock-icon>
  </span>
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

<gstock-select placeholder="Medium" size="medium" style="margin-bottom: 1rem">
  <span slot="prefix" class="input__prefix">
    <gstock-icon name="search" size="medium"></gstock-icon>
  </span>
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

<gstock-select placeholder="Large" size="large" style="margin-bottom: 1rem">
  <span slot="prefix" class="input__prefix">
    <gstock-icon name="search" size="large"></gstock-icon>
  </span>
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

Grouping

Section 1 Option 1 Option 2 Option 3 Section 2 Option 4 Option 5 Option 6 
<gstock-select>
  <gstock-group-label>Section 1</gstock-group-label>
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
  <gstock-divider></gstock-divider>
  <gstock-group-label>Section 2</gstock-group-label>
  <gstock-option value="option-4">Option 4</gstock-option>
  <gstock-option value="option-5">Option 5</gstock-option>
  <gstock-option value="option-6">Option 6</gstock-option>
</gstock-select>

Multiple

Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7
Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 
<gstock-select label="Select multiple options:" value="option-1 option-2" multiple clearable>
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
  <gstock-option value="option-4">Option 4</gstock-option>
  <gstock-option value="option-5">Option 5</gstock-option>
  <gstock-option value="option-6">Option 6</gstock-option>
  <gstock-option value="option-7">Option 7</gstock-option>
</gstock-select>

<br>

<gstock-select label="Disabled multiple options:" value="option-1 option-2" multiple disabled>
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
  <gstock-option value="option-4">Option 4</gstock-option>
  <gstock-option value="option-5">Option 5</gstock-option>
  <gstock-option value="option-6">Option 6</gstock-option>
  <gstock-option value="option-7">Option 7</gstock-option>
</gstock-select>

Placement

Use the placement attribute to placement of the select listbox. Allow placements are top and bottom.

Option 1 Option 2 Option 3 
<gstock-select placement="top" placeholder="Top placement set in select listbox">
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

Estado de carga

Utilice el atributo loading para mostrar un indicador de carga cuando el select está procesando datos de forma asíncrona.

Opción 1 Opción 2 Opción 3 
<gstock-select loading placeholder="Cargando opciones...">
  <gstock-option value="1">Opción 1</gstock-option>
  <gstock-option value="2">Opción 2</gstock-option>
  <gstock-option value="3">Opción 3</gstock-option>
</gstock-select>

Puede personalizar el icono de carga utilizando el slot loading.

Opción 1 Opción 2 Opción 3 
<gstock-select loading>
  <gstock-animation slot="loading" animation="rotateOut" play>
    <gstock-icon name="loader"></gstock-icon>
  </gstock-animation>
  <gstock-option value="1">Opción 1</gstock-option>
  <gstock-option value="2">Opción 2</gstock-option>
  <gstock-option value="3">Opción 3</gstock-option>
</gstock-select>

Carga asíncrona de opciones

Combine el atributo loading con opciones dinámicas para indicar al usuario que se están cargando resultados.

  • Valor:
  • Etiqueta mostrada:
  • Estado: 
<gstock-select clearable label="Raza de perro" placeholder="Buscar raza de perro..."></gstock-select>

<ul class="output">
  <li>
    <span class="output__key">Valor:</span>
    <code class="output__value value"></code>
  </li>
  <li>
    <span class="output__key">Etiqueta mostrada:</span>
    <code class="output__value display-label"></code>
  </li>
  <li>
    <span class="output__key">Estado:</span>
    <code class="output__value status"></code>
  </li>
</ul>

<script type="module">
  
  const select = document.querySelector('gstock-select');
  const value = document.querySelector('.output__value.value');
  const displayLabel = document.querySelector('.output__value.display-label');
  const status = document.querySelector('.output__value.status');

  const loadOptions = () => {
    select.loading = true;
    status.innerText = 'Cargando...';

    while (select.firstChild) {
      select.removeChild(select.firstChild);
    }

    const url = 'https://api.thedogapi.com/v1/breeds?limit=20';

    fetch(url, { method: 'GET' })
      .then(response => response.json())
      .then(json => {
        json?.forEach(dog => {
          const option = document.createElement('gstock-option');
          option.value = dog.id;
          option.innerText = `${dog.name} (#${dog.id})`;
          select.appendChild(option);
        });

        select.loading = false;
        status.innerText = `Se encontraron ${json.length} resultados`;
      })
      .catch(error => {
        select.helpText = `Error: ${error.message}`;
        select.loading = false;
        status.innerText = 'Error';
      });
  };

  await Promise.all([customElements.whenDefined('gstock-select')]).then(() => {
    value.innerText = select.value;
    displayLabel.innerText = select.displayInput.value;
    status.innerText = 'Listo';

    select.addEventListener('gstock-change-event', event => {
      const target = event.target;

      value.innerText = target.value;
      displayLabel.innerText = target.displayInput.value;
    });

    loadOptions();
  });
</script>

Events

Change

Use the gstock-change-event event to observe when the value was changed. To emit this event select a option from the list.

Option 1 Option 2 Option 3
  • Value:
  • Display Label: 
<gstock-select label="Change Event">
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

<ul class="output">
  <li><span class="output__key">Value: </span><code class="output__value value"></code></li>
  <li><span class="output__key">Display Label: </span><code class="output__value display-label"></code></li>
</ul>

<script type="module">
  const select = document.querySelector('gstock-select');
  const value = document.querySelector('.output__value.value');
  const displayLabel = document.querySelector('.output__value.display-label');

  await Promise.all([customElements.whenDefined('gstock-select')]).then(() => {
    value.innerText = select.value;
    displayLabel.innerText = select.displayLabel;

    select.addEventListener('gstock-change-event', event => {
      console.info("Emitted event", event);
      const target = event.target;
      value.innerText = target.value;
      displayLabel.innerText = target.displayLabel;
    });
  });
</script>

Clear

Use the gstock-clear-event event to observe when the value was cleared. To emit this event enable the clearable attribute and press the clear button when the value is not empty.

Option 1 Option 2 Option 3
  • Value:
  • Display Label: 
<gstock-select label="Clear Event" value="option-2" clearable>
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

<ul class="output">
  <li><span class="output__key">Value: </span><code class="output__value value"></code></li>
  <li><span class="output__key">Display Label: </span><code class="output__value display-label"></code></li>
</ul>

<script type="module">
  const select = document.querySelector('gstock-select');
  const value = document.querySelector('.output__value.value');
  const displayLabel = document.querySelector('.output__value.display-label');

  await Promise.all([customElements.whenDefined('gstock-select')]).then(() => {
    value.innerText = select.value;
    displayLabel.innerText = select.displayLabel;

    select.addEventListener('gstock-clear-event', event => {
      console.info("Emitted event", event);
      const target = event.target;
      value.innerText = target.value;
      displayLabel.innerText = target.displayLabel;
    });

    select.addEventListener('gstock-change-event', event => {
      const target = event.target;
      value.innerText = target.value;
      displayLabel.innerText = target.displayLabel;
    });
  });
</script>

Input

Use the gstock-input-event event to observe when the value was inputted. To emit this event select a option from the list.

Option 1 Option 2 Option 3
  • Value:
  • Display Label: 
<gstock-select label="Input Event">
  <gstock-option value="option-1">Option 1</gstock-option>
  <gstock-option value="option-2">Option 2</gstock-option>
  <gstock-option value="option-3">Option 3</gstock-option>
</gstock-select>

<ul class="output">
  <li><span class="output__key">Value: </span><code class="output__value value"></code></li>
  <li><span class="output__key">Display Label: </span><code class="output__value display-label"></code></li>
</ul>

<script type="module">
  const select = document.querySelector('gstock-select');
  const value = document.querySelector('.output__value.value');
  const displayLabel = document.querySelector('.output__value.display-label');

  await Promise.all([customElements.whenDefined('gstock-select')]).then(() => {
    value.innerText = select.value;
    displayLabel.innerText = select.displayLabel;

    select.addEventListener('gstock-input-event', event => {
      console.info("Emitted event", event);
      const target = event.target;
      value.innerText = target.value;
      displayLabel.innerText = target.displayLabel;
    });
  });
</script>

Control de formulario

Este componente funciona con elementos estándar <form>. Consulta la sección sobre controles de formulario para obtener más información sobre el envío de formularios y la validación del lado del cliente.

Campo obligatorio

Utilice el atributo required para que el valor del componente sea obligatorio.

Option 1 Option 2 Option 3
Submit Reset 
<form class="select-validation-required">
  <gstock-select name="name" label="Required field:" required help-text="The form will not be submitted if a required field is incomplete.">
    <gstock-option value="option-1">Option 1</gstock-option>
    <gstock-option value="option-2">Option 2</gstock-option>
    <gstock-option value="option-3">Option 3</gstock-option>
  </gstock-select>
  <br>
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>

<script type="module">
  
  const form = document.querySelector('form');

  await Promise.all([
    customElements.whenDefined('gstock-select'),
    customElements.whenDefined('gstock-button'),
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
      alert(`The field is valid!\n\n${formData}`);
    });
  });
</script>

Custom error messages

To create a custom validation error, pass a non-empty string to the setCustomValidity() method.

This will override any existing validation constraints. To make the select valid again, call setCustomValidity() again with an empty string.

Option 1 gstock Option 2
Submit Reset 
<form>
  <gstock-select label="Select the `gstock` option to make the select valid:" required help-text="The form will not be submitted when a custom validity is set and the browser will show a
    validation error when the containing form is submitted.">
    <gstock-option value="option-1">Option 1</gstock-option>
    <gstock-option value="gstock">gstock</gstock-option>
    <gstock-option value="option-3">Option 2</gstock-option>
  </gstock-select>
  <br>
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>

<script type="module">
  
  const form = document.querySelector('form');
  const select = form.querySelector('gstock-select');

  await Promise.all([
    customElements.whenDefined('gstock-select'),
    customElements.whenDefined('gstock-button'),
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
      alert(`The field is valid!\n\n${formData}`);
    });

    select.addEventListener('gstock-input-event', () => {
      if (select.value === 'gstock') {
        select.setCustomValidity('');
      } else {
        select.setCustomValidity("You must select 'gstock' before sending!");
      }
    });
  });
</script>

Styling validation

Use the validity-styles attribute to apply validation styles. These styles are applied only after a user interaction, such as typing or submitting.

Option 1 Option 2 Option 3
Submit Reset 
<form>
  <gstock-select name="name" label="Name:" help-text="This field is required." required validity-styles>
    <gstock-option value="option-1">Option 1</gstock-option>
    <gstock-option value="option-2">Option 2</gstock-option>
    <gstock-option value="option-3">Option 3</gstock-option>
  </gstock-select>
  <br>
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>

<script type="module">
  
  const form = document.querySelector('form');

  await Promise.all([
    customElements.whenDefined('gstock-select'),
    customElements.whenDefined('gstock-button'),
  ]).then(() => {
    form.addEventListener('submit', event => {
      event.preventDefault();
      const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
      alert(`The field is valid!\n\n${formData}`);
    });
  });
</script>

Inline validation

To disable the browsers error messages, you need to cancel the gstock-invalid-event event. Then you can apply your own inline validation errors.

Option 1 Option 2 Option 3

Submit Reset 
<form class="inline-validation">
  <gstock-select name="name" label="Name:" help-text="This field is required." required validity-styles>
    <gstock-option value="option-1">Option 1</gstock-option>
    <gstock-option value="option-2">Option 2</gstock-option>
    <gstock-option value="option-3">Option 3</gstock-option>
  </gstock-select>
  <br>
  <div class="error" aria-live="polite" hidden></div>
  <br>
  <gstock-button size="small" type="submit">Submit</gstock-button>
  <gstock-button size="small" variant="outlined" type="reset">Reset</gstock-button>
</form>

<script type="module">
  
  const form = document.querySelector('form');
  const nameError = form.querySelector('.error');

  await Promise.all([
    customElements.whenDefined('gstock-select'),
    customElements.whenDefined('gstock-button'),
  ]).then(() => {
    form.addEventListener(
      'gstock-invalid-event',
      event => {
        event.preventDefault();
        nameError.textContent = `Error: ${event.target.validationMessage}`;
        nameError.hidden = false;
        event.target.focus();
      },
      { capture: true },
    );

    form.addEventListener('submit', event => {
      event.preventDefault();
      nameError.hidden = true;
      nameError.textContent = '';
      setTimeout(() => {
        const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
        alert(`The field is valid!\n\n${formData}`);
      }, 50);
    });

    form.addEventListener('reset', () => {
      nameError.hidden = true;
      nameError.textContent = '';
    });
  });
</script>