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"/>

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

<%@ taglib prefix="kuik" uri="kuik" %>
<p>
    <kuik:form-field-tick name="radiosm" type="radio" label="Radio sm" value="1"/>
    <kuik:form-field-tick name="radiosm" type="radio" label="Radio sm" value="2" isChecked="true"/>
    <kuik:form-field-tick name="radiosm" type="radio" label="Radio sm" value="3" isDisabled="true"/>
</p>
<p>
    <kuik:form-field-tick name="radioxl" type="radio" label="Radio xl" value="1" size="xl"/>
    <kuik:form-field-tick name="radioxl" type="radio" label="Radio xl" value="2" isChecked="true" size="xl"/>
    <kuik:form-field-tick name="radioxl" type="radio" label="Radio xl" value="3" isDisabled="true" size="xl"/>
</p>
<p>
    <kuik:form-field-tick name="radioswitchsm" type="radio" label="Radio switch sm" value="1" switchType="true"/>
    <kuik:form-field-tick name="radioswitchsm" type="radio" label="Radio switch sm" value="2" isChecked="true" switchType="true"/>
    <kuik:form-field-tick name="radioswitchsm" type="radio" label="Radio switch sm" value="3" isDisabled="true" switchType="true"/>
</p>
<p>
    <kuik:form-field-tick name="radioswitchxl" type="radio" label="Radio switch xl" size="xl" value="1" switchType="true"/>
    <kuik:form-field-tick name="radioswitchxl" type="radio" label="Radio switch xl" size="xl" value="2" isChecked="true" switchType="true"/>
    <kuik:form-field-tick name="radioswitchxl" type="radio" label="Radio switch xl" size="xl" value="3" isDisabled="true" switchType="true"/>
</p>
<p>
    <kuik:form-field-tick name="radioleft" type="radio" label="Radio right" value="1" disposition="right"/>
    <kuik:form-field-tick name="radioleft" type="radio" label="Radio switch right" value="2" switchType="true" disposition="right"/>
</p>
<p>
    <kuik:form-field-tick name="checkboxsm" type="checkbox" label="Checkbox sm" value="1"/>
    <kuik:form-field-tick name="checkboxsm" type="checkbox" label="Checkbox sm" value="2" isChecked="true"/>
    <kuik:form-field-tick name="checkboxsm" type="checkbox" label="Checkbox sm" value="3" isDisabled="true"/>
</p>
<p>
    <kuik:form-field-tick name="checkboxxl" type="checkbox" label="Checkbox xl" value="1" size="xl"/>
    <kuik:form-field-tick name="checkboxxl" type="checkbox" label="Checkbox xl" value="2" isChecked="true" size="xl"/>
    <kuik:form-field-tick name="checkboxxl" type="checkbox" label="Checkbox xl" value="3" isDisabled="true" size="xl"/>
</p>
<p>
    <kuik:form-field-tick name="checkboxswitchsm" type="checkbox" label="Checkbox switch sm" value="1" switchType="true"/>
    <kuik:form-field-tick name="checkboxswitchsm" type="checkbox" label="Checkbox switch sm" value="2" isChecked="true" switchType="true"/>
    <kuik:form-field-tick name="checkboxswitchsm" type="checkbox" label="Checkbox switch sm" value="3" isDisabled="true" switchType="true"/>
</p>
<p>
    <kuik:form-field-tick name="checkboxswitchxl" type="checkbox" label="Checkbox switch xl" size="xl" value="1" switchType="true"/>
    <kuik:form-field-tick name="checkboxswitchxl" type="checkbox" label="Checkbox switch xl" size="xl" value="2" isChecked="true" switchType="true"/>
    <kuik:form-field-tick name="checkboxswitchxl" type="checkbox" label="Checkbox switch xl" size="xl" value="3" isDisabled="true" switchType="true"/>
</p>
<p>
    <kuik:form-field-tick name="checkboxleft" type="checkbox" label="Checkbox right" value="1" disposition="right"/>
    <kuik:form-field-tick name="checkboxleft" type="checkbox" label="Checkbox switch right" value="2" switchType="true" disposition="right"/>
</p>
<p>
    <kuik:form-field-tick name="checkboxleft" label="Tag avec un body" type="checkbox" value="1" disposition="right">
       <kuik:icon title="" source="icon://ui/mobile" />
    </kuik:form-field-tick>
</p>

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

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