Keyboard

<div class="card">
    <h:form>
        <div class="ui-fluid formgrid grid">
            <div class="field col-12 md:col-4">
                <p:outputLabel for="default" value="Default Layout: "/>
                <p:keyboard id="default" value="#{keyboardView.value1}"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="qwerty" value="Basic QWERTY: "/>
                <p:keyboard id="qwerty" value="#{keyboardView.value2}" layout="qwertyBasic"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="alphabetic" value="Alphabetic Layout: "/>
                <p:keyboard id="alphabetic" value="#{keyboardView.value3}" layout="alphabetic"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="custom1" value="Custom Layout 1: "/>
                <p:keyboard id="custom1" value="#{keyboardView.value4}" layout="custom"
                            layoutTemplate="prime-back,faces-clear,rocks-close"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="custom2" value="Custom Layout 2: "/>
                <p:keyboard id="custom2" value="#{keyboardView.value5}" layout="custom"
                            layoutTemplate="create-space-your-close,owntemplate-shift,easily-space-spacebar"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="keypad" value="Default Keypad: "/>
                <p:keyboard id="keypad" value="#{keyboardView.value6}" keypadOnly="true"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="password" value="Password Mode: "/>
                <p:keyboard id="password" value="#{keyboardView.value9}" password="true" keypadOnly="true"/>
            </div>

            <div class="field col-12 md:col-4">
                <p:outputLabel for="rtl" value="RTL: "/>
                <p:keyboard id="rtl" value="#{keyboardView.value1}" dir="rtl"/>
            </div>
        </div>
    </h:form>
</div>