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).

<%@ 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>