Liste d'option

Champ de saisie de données sous forme de liste de sélection (combobox ou multiple).

Classes du composant

form-field--select : Cette classe est obligatoire pour ce type de champ de saisie

Modificateurs de taille

form-field--sm : Small
form-field--md : Medium
form-field--lg : Large
form-field--xl : Extra-large

Modificateurs d'apparence

form-field--accent : Met le texte du champ de saisie en valeur
form-field--selected : Met le champ de saisie en valeur de façon à montrer qu'il est sélectionné
form-field--seamless : Rend le champ de saisie discret en supprimant ses bordures
form-field--auto-size : Permet au champ de s'agrandir avec le texte saisi à l'intérieur
form-field--tick : Indique que le champ de saisie est de type "checkbox" ou "radio" (voir documentation dédiée)
form-field--expanded : Permet au champ de saisie d'occuper 100% de la largeur disponible
form-field--inline : Aligne le champ de saisie au centre de la ligne de texte quand il est utilisé en "inline"

Commentaires

Distinction `id` et `name`

Le paramètre name n'étant pas obligatoire, il prendra, par défaut, la valeur du paramètre id.

Définition des options

Le paramètre options de ce champ prend un objet de type List<OptionItem> en paramètre. Chaque item est de type OptionItem.

Un item est la combinaison d'un libellé (label) et d'une valeur associée (value).

Select simple avec options

Select multiple avec options

Select simple avec optgroup

Select multiple avec optgroup

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>

<%@ page import="java.util.ArrayList" %>
<%@ page import="fr.kosmos.web.kore.attributes.interfaces.OptionItem" %>
<%@ page import="fr.kosmos.web.kore.attributes.interfaces.SelectChildItem" %>
<%@ page import="java.util.List" %>
<%@ page import="fr.kosmos.web.kore.attributes.DefaultOptionItem" %>
<%@ page import="fr.kosmos.web.kore.attributes.interfaces.OptgroupItem" %>
<%@ page import="fr.kosmos.web.kore.attributes.DefaultOptgroupItem" %>
<%@ taglib prefix="kuik" uri="kuik" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
final OptionItem optionItem1 = new DefaultOptionItem("foo", "Foo");
final OptionItem optionItem2 = new DefaultOptionItem("bar", "Bar");
final OptionItem optionItem3 = new DefaultOptionItem("baz", "Baz");

final List<OptionItem> optgroupChildren = new ArrayList<>();
optgroupChildren.add(optionItem1);
optgroupChildren.add(optionItem2);
optgroupChildren.add(optionItem3);

final OptgroupItem optgroupItem = new DefaultOptgroupItem("Foo bar baz");
optgroupItem.setChildren(optgroupChildren);

final List<SelectChildItem> optionsItems = new ArrayList<>();
optionsItems.add(optionItem1);
optionsItems.add(optionItem2);
optionsItems.add(optionItem3);

final List<SelectChildItem> optgroupsItems = new ArrayList<>();
optgroupsItems.add(optgroupItem);
%>

<c:set var="optionsItems" value="<%= optionsItems %>" />
<c:set var="optgroupsItems" value="<%= optgroupsItems %>" />

<div>
    <kuik:form-field-select id="country" items="${optionsItems}" size="md" label="Select simple avec options" />
</div>
<div>
    <kuik:form-field-select id="country" items="${optionsItems}" size="md" label="Select multiple avec options" multiple="true" />
</div>

<div>
    <kuik:form-field-select id="country" items="${optgroupsItems}" size="md" label="Select simple avec optgroup" />
</div>
<div>
    <kuik:form-field-select id="country" items="${optgroupsItems}" size="md" label="Select multiple avec optgroup" multiple="true" />
</div>

Name	Type	Required	Description
size	java.lang.String	false	Taille du champ de saisie
id	java.lang.String	true	Identifiant unique du champ
label	java.lang.String	false	Nom du champ de saisie
name	java.lang.String	false	Nom technique du champ de saisie
value	java.lang.String	false	Valeur prédéfinie du champ de saisie
multiple	java.lang.Boolean	false	Indique si le champ de saisie peut recevoir plusieurs valeurs
items	java.util.List	true	Items du champ de saisie

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<%@ attribute name="size" type="java.lang.String" required="false" description="Taille du champ de saisie" %>
<%@ attribute name="id" type="java.lang.String" required="true" description="Identifiant unique du champ" %>
<%@ attribute name="label" type="java.lang.String" required="false" description="Nom du champ de saisie" %>
<%@ attribute name="name" type="java.lang.String" required="false" description="Nom technique du champ de saisie" %>
<%@ attribute name="value" type="java.lang.String" required="false" description="Valeur prédéfinie du champ de saisie" %>
<%@ attribute name="multiple" type="java.lang.Boolean" required="false" description="Indique si le champ de saisie peut recevoir plusieurs valeurs" %>
<%@ attribute name="items" type="java.util.List<fr.kosmos.web.kore.attributes.interfaces.SelectChildItem>" required="true" description="Items du champ de saisie" %>

<c:set var="__formFieldInputId" value="${pageScope.id}" />
<c:set var="formFieldSize" value="form-field--${not empty pageScope.size ? pageScope.size : 'md'}" />
<c:set var="formFieldClasses" value="form-field ${multiple ? '' : 'form-field--select'} ${pageScope.formFieldSize}" />
<c:set var="formFieldName" value="${not empty pageScope.name ? pageScope.name : pageScope.id}" />
<c:set var="formFieldType" value="${not empty pageScope.type ? pageScope.type : 'text'}" />
<c:set var="formFieldValue">
    <c:if test="${not empty pageScope.value}">
        value="${pageScope.value}"
    </c:if>
</c:set>

<c:set var="attributes">
    <c:forEach items="${dynattrs}" var="a">
        <c:choose>
            <c:when test="${a.key == 'class'}">
                <c:set value="${formFieldClasses} ${a.value}" var="formFieldClasses"/>
            </c:when>
            <c:otherwise>${a.key}="${a.value}" </c:otherwise>
        </c:choose>
    </c:forEach>
</c:set>

<c:set var="__formFieldSelectStep" value="help" scope="request" />
<jsp:doBody var="fieldHelp" />

<div class="${pageScope.formFieldClasses}">
    <c:if test="${not empty label}">
        <label for="${pageScope.id}" class="form-field__label">
            <c:out value="${pageScope.label}" />
        </label>
    </c:if>
    <div class="form-field__control">
        <select
            class="form-field__input"
            id="${pageScope.id}"
            name="${pageScope.formFieldName}"
            ${pageScope.formFieldValue}
            ${pageScope.multiple ? 'multiple' : ''}
            <c:if test="${not empty fn:trim(fieldHelp)}">aria-describedby="${pageScope.id}-help"</c:if>
            ${pageScope.attributes}
        >
            <c:forEach items="${pageScope.items}" var="item">
                <c:forEach items="${item.getClass().getInterfaces()}" varStatus="status">
                    <c:set var="classSimpleName" value="${item.getClass().getInterfaces()[status.index].getSimpleName()}" />
                    <c:if test="${classSimpleName eq 'OptionItem'}">
                        <option
                            value="${item.value}"
                            <c:if test="${item.disabled}">disabled</c:if>
                            <c:if test="${item.selected}">selected</c:if>
                        >
                            <c:out value="${item.label}" />
                        </option>
                    </c:if>
                    <c:if test="${classSimpleName eq 'OptgroupItem'}">
                        <optgroup
                            label="${item.label}"
                            <c:if test="${item.disabled}">disabled</c:if>
                        >
                            <c:forEach items="${item.children}" var="child">
                                <option
                                    value="${child.value}"
                                    <c:if test="${child.disabled}">disabled</c:if>
                                    <c:if test="${child.selected}">selected</c:if>
                                >
                                    <c:out value="${child.label}" />
                                </option>
                            </c:forEach>
                        </optgroup>
                    </c:if>
                </c:forEach>
            </c:forEach>
        </select>
    </div>
    <c:if test="${not empty fieldHelp}">
        <kuik:form-field-help>
            <c:out value="${fieldHelp}" escapeXml="false" />
        </kuik:form-field-help>
    </c:if>
</div>