Select
<gstock-select>
|
GstockSelect
Tamaño
Utilice el atributo de size para cambiar el tamaño del componente.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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.
<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
<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
<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.
<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>
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.
-
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.
-
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.
-
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.
<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.
<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.
<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.
<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>