Volver a Components

Select

<sg-select> v0.1.1

Componente select avanzado con b煤squeda, selecci贸n m煤ltiple y m谩s.

Ejemplos

B谩sico

example.html 
<sg-select
  label="Pais"
  placeholder="Selecciona un pais"
></sg-select>

Tama帽os

example.html 
<sg-select size="sm" placeholder="Small"></sg-select>
<sg-select size="md" placeholder="Medium"></sg-select>
<sg-select size="lg" placeholder="Large"></sg-select>

Con b煤squeda

example.html 
<sg-select
  label="Buscar pais"
  placeholder="Escribe para buscar..."
  searchable
></sg-select>

Selecci贸n m煤ltiple

example.html 
<sg-select
  label="Idiomas"
  placeholder="Selecciona idiomas..."
  multiple
></sg-select>

Clearable

example.html 
<sg-select
  label="Categoria"
  clearable
></sg-select>

Crear nuevas opciones

example.html 
<sg-select
  label="Tags"
  placeholder="Escribe para crear..."
  searchable
  creatable
  multiple
></sg-select>

API Reference

Propiedades

12
Prop Tipo Default Descripci贸n
value string undefined Valor seleccionado
values string[] [] Valores (multi-select)
options SelectOption[] | string undefined Opciones
label string undefined Etiqueta del campo
placeholder string undefined Texto placeholder
size sm | md | lg 'md' Tamano
variant default | filled | outline 'default' Variante visual
multiple boolean false Seleccion multiple
searchable boolean false Habilita busqueda
creatable boolean false Crear opciones
disabled boolean false Deshabilitado
clearable boolean false Permite limpiar

Eventos

4
Evento Tipo Descripci贸n
sgChange CustomEvent Emitido cuando cambia la seleccion
sgSearch CustomEvent Emitido al escribir en busqueda
sgOpen CustomEvent Emitido cuando se abre
sgClose CustomEvent Emitido cuando se cierra

Slots

2
Slot Descripci贸n
(default) Elementos sg-option
empty Sin resultados

C贸mo usar

Uso b谩sico

example.html 
<sg-select
  label="Pais"
  placeholder="Selecciona..."
>
  <sg-option value="es">Espana</sg-option>
  <sg-option value="mx">Mexico</sg-option>
</sg-select>

Con b煤squeda

searchable.html 
<sg-select
  label="Buscar"
  searchable
>
  <sg-option value="es">Espana</sg-option>
  <sg-option value="mx">Mexico</sg-option>
</sg-select>

Multi-select

multiple.html 
<sg-select
  label="Idiomas"
  multiple
>
  <sg-option value="es">Espanol</sg-option>
  <sg-option value="en">English</sg-option>
</sg-select>

JavaScript

events.js 
const select = document.querySelector('sg-select');

select.addEventListener('sgChange', (e) => {
  console.log('Seleccionado:', e.detail.value);
});

await select.open();
await select.clear();