Radio bouton, checkbox et switch

Les composant `form-field-tick` permet d'insérer deux types de champ de saisie

• Radio bouton
• Checkbox

Les paramètres suivants peuvent être passés au tag :

• type: Type du champ radio/checkbox
• switchType: True si le champ doit prendre l'apparence d'un switch
• size: La taille du composant sm/md/lg/xl
• label: Le libellé du champ
• name: Le nom du champ
• value: La valeur du champ
• disposition: La disposition du champ par rapport au libellé left/right
• isChecked: Champ coché
• isDisabled: Champ désactivé

Exemples

<kuik:form-field-tick name="radio" type="radio" label="Radio" value="1"/>
<kuik:form-field-tick name="radio" type="radio" label="Radio" isDisabled="true" isChecked="true" value="1" disposition="left"/>
<kuik:form-field-tick name="switch" type="radio" label="Radio switch" value="1" size="xl" switchType="true"/>

<kuik:form-field-tick name="checkbox" type="checkbox" label="Checkbox" value="1"/>
<kuik:form-field-tick name="checkbox" type="checkbox" label="Checkbox" isDisabled="true" isChecked="true" value="1" disposition="left"/>
<kuik:form-field-tick name="checkbox switch" type="checkbox" label="Checkbox switch" value="1" size="xl" switchType="true"/>

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ attribute name="type" required="true" type="java.lang.String" description="Type" %>
<%@ attribute name="switchType" required="false" type="java.lang.Boolean" description="Le champ doit-il prendre l'apparence d'un switch (défaut : false)" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>
<%@ attribute name="label" required="true" type="java.lang.String" description="Libellé du champ" %>
<%@ attribute name="name" required="true" type="java.lang.String" description="Nom du champ" %>
<%@ attribute name="value" required="true" type="java.lang.String" description="Valeur du champ" %>
<%@ attribute name="disposition" required="false" type="java.lang.String" description="Disposition du champ par rapport au libellé (défaut : left)" %>
<%@ attribute name="isChecked" required="false" type="java.lang.Boolean" description="L'item est sélectionné" %>
<%@ attribute name="isDisabled" required="false" type="java.lang.Boolean" description="L'item est désactivé" %>

<c:if test="${empty pageScope.size}">
    <c:set var="size" value="sm"/>
</c:if>
<c:set var="classesSize" value="form-field--${pageScope.size}"/>

<c:set var="classes" value="form-field form-field--tick ${pageScope.classesSize}"/>


<c:set var="inputClass" value="k-${pageScope.type}"/>
<c:if test="${pageScope.switchType}">
    <c:set var="inputClass" value="k-switch"/>
</c:if>

<c:if test="${empty pageScope.disposition}">
    <c:set var="disposition" value="left"/>
</c:if>

<c:set var="checked" value=""/>
<c:if test="${pageScope.isChecked}">
    <c:set var="checked" value="checked"/>
</c:if>

<c:set var="disabled" value=""/>
<c:if test="${pageScope.isDisabled}">
    <c:set var="disabled" value="disabled"/>
</c:if>

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

<div class="${pageScope.classes}">
    <label class="form-field__label" for="${pageScope.name}-${pageScope.value}">
        <c:choose>
            <c:when test="${pageScope.disposition == 'left'}">
                <input id="${pageScope.name}-${pageScope.value}" class="${pageScope.inputClass}" type="${pageScope.type}" name="${pageScope.name}" value="${pageScope.value}" ${pageScope.attributes} ${pageScope.checked} ${pageScope.disabled}/>
                    <span class="form-field__tick-label">
                            ${pageScope.label}
                    </span>
                    <jsp:doBody />
            </c:when>
            <c:otherwise>
                <span class="form-field__tick-label">
                        ${pageScope.label}
                </span>
                <jsp:doBody />
                <input id="${pageScope.name}-${pageScope.value}" class="${pageScope.inputClass}" type="${pageScope.type}" name="${pageScope.name}" value="${pageScope.value}" ${pageScope.attributes} ${pageScope.checked} ${pageScope.disabled}/>
            </c:otherwise>
        </c:choose>
    </label>
</div>