React Select

    El componente Seleccionar Ignite UI for React permite una sola selección de una lista de elementos, colocados en un menú desplegable. Este control de formulario ofrece una navegación rápida por la lista de elementos, incluida la selección, en función de una coincidencia de uno o varios caracteres.

    React Select Example

    Usage

    Primero, debes instalar el paquete npm Ignite UI for React correspondiente ejecutando el siguiente comando:

    npm install igniteui-react

    Entonces tendrás que importar elIgrSelect y elIgrSelectItem y su CSS necesario, así:

    import { IgrSelect, IgrSelectItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

    [!Note] Please note that the select header and group components are not mandatory unless you want to use them.

    To start using the component add the IgrSelect along with a list of IgrSelectItem's to choose from:

    <IgrSelect>
  <IgrSelectItem value="Orange"><span>Orange</span></IgrSelectItem>
  <IgrSelectItem value="Apple"><span>Apple</span></IgrSelectItem>
  <IgrSelectItem value="Banana"><span>Banana</span></IgrSelectItem>
  <IgrSelectItem value="Mango"><span>Mango</span></IgrSelectItem>
</IgrSelect>

    Seleccionar

    The IgrSelect component can be used inside a Form component, thus it exposes a name property to be registered with. It also has a label, and placeholder properties. The outlined property is used for styling purposes only when it comes to the Material theme. Except for the default slot, the component provides a few other slots including header, footer, helper-text, prefix, suffix, and toggle-icon. The component size can be changed using the --ig-size CSS variable.

    Item

    The IgrSelectItem component allows the users to declaratively specify a list of options to be used by the IgrSelect control. Each item provides a value property that represents the data it carries upon selection. The IgrSelectItem has a default slot which allows you to specify the text content of the item. This text content will be used as value in case the value property is not present on the IgrSelectItem. You could also provide custom content to be rendered before or after the IgrSelectItem content using the prefix and suffix slots. You could predefine a selected item by setting the Selected property. You could also disable some or all items via the disabled property.

    You can use the IgrSelectHeader to provide a header for a group of items.

    <IgrSelect>
  <IgrSelectHeader>
    <span>Tasks</span>
  </IgrSelectHeader>
</IgrSelect>

    Group

    Multiple IgrSelectItems can be placed between the opening and closing brackets of an IgrSelectGroup component so that users can visually group them together. The IgrSelectGroup can be labelled via its label slot and disabled via its disabled property.

    [!Note] Keep in mind that if a select group is disabled, you cannot enable separate items of it.

    <IgrSelect>
  <IgrSelectGroup>
    <span slot="label">Europe</span>
    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" collection="material"></IgrIcon>
      </span>
      <span> Germany </span>
      <span slot="suffix">DE</span>
    </IgrSelectItem>
    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" collection="material"></IgrIcon>
      </span>
      <span> France </span>
      <span slot="suffix">FR</span>
    </IgrSelectItem>
    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" collection="material"></IgrIcon>
      </span>
      <span> Spain </span>
      <span slot="suffix">ES</span>
    </IgrSelectItem>
  </IgrSelectGroup>
</IgrSelect>

    Validation

    In addition, the IgrSelect supports most of the IgrInput properties, such as required, disabled, autofocus, etc. The component also exposes a method bound to its validation:

    • reportValidity - checks for validity and focuses the component if invalid.

    Keyboard Navigation

    Cuando la selección está enfocada y la lista de opciones no está visible:

    • Open the select using the ALT + ↑ ↓ combination or by clicking on the SPACE or the ENTER key.
    • Close the select using the ALT + ↑ or ↓ combination or any of the ENTER, SPACE, ESC or IgrTab keys.
    • Usando las teclas ← → seleccionará el elemento anterior en la lista.
    • Usando las teclas ↑ ↓ seleccionará el siguiente elemento en la lista.
    • Usando las HOME teclas o END seleccionará el primer o último elemento de la lista.
    • Al escribir caracteres se consultará la lista de elementos y se seleccionará el que más se asemeje a la entrada actual del usuario.

    Cuando la selección está enfocada y la lista de opciones está visible:

    • Usando las ENTER teclas o SPACE seleccionará un elemento y cerrará la lista.
    • Usando las teclas ← → se activará el elemento anterior de la lista.
    • El uso de las teclas ↑ ↓ activará el siguiente elemento de la lista.
    • El uso de las HOME teclas o END activará el primer o último elemento de la lista.

    [!Note] The IgrSelect component supports only single selection of items.

    Styling

    You can change the appearance of the Ignite UI for React IgrSelect component and its items, by using the exposed CSS parts listed below:

    Seleccionar componente

    Nombre de la pieza Descripción
    input La entrada igc encapsulada.
    label La etiqueta de texto encapsulado.
    list Un contenedor que contiene la lista de opciones.
    prefix Un contenedor de prefijo que representa el contenido antes de la entrada.
    suffix Un contenedor de sufijo que representa el contenido después de la entrada.
    toggle-icon Un contenedor de icono de alternancia que representa el contenido dentro del contenedor de sufijo.
    helper-text Un contenedor de texto auxiliar que muestra el contenido debajo de la entrada.

    Seleccionar componente del artículo

    Nombre de la pieza Descripción
    content El contenedor principal que contiene el contenido de texto de un elemento.
    prefix Un contenedor de prefijo que presenta el contenido antes del contenedor principal.
    suffix Un contenedor de sufijo que representa el contenido después del contenedor principal.

    Seleccionar componente de grupo

    Nombre de la pieza Descripción
    label Un contenedor de etiquetas que muestra el contenido encima de los elementos del grupo seleccionado. 
    igc-select::part(base) {
  background: var(--ig-primary-50);
}

igc-select-item[active] {
  background: var(--ig-secondary-300);
}

igc-select::part(input) {
  background-color: var(--ig-primary-50);
}

igc-select::part(prefix),
igc-select::part(suffix) {
  color: var(--ig-secondary-500-contrast);
  background: var(--ig-secondary-500);
}

    API Reference

    Additional Resources