Form Element

Form elements include a label, optional prefix and suffix elements and will automatically render a message field after the input when there are validation errors or other messages for the input element.


Some text

You can add grid size hints to the wrapper by setting one or more of the small, medium and large attributes to a value between 1 and 12.

To add inline labels, use the prefix or suffix attributes, or simply add your own markup before or after the input field.

Buttons can also be rendered inline as shown above. Please refer to the Foundation For Apps Forms documentation for further options.


        <t:form-element medium="6">
            <h:inputText pt:placeholder="Name"/>

        <t:form-element label="Age" small="12" medium="6">
            <t:slider min="0" max="100" lower="20" connect="lower"/>

        <t:form-element label="URL" prefix="www." suffix=".com" small="12" medium="6">
            <h:inputText pt:placeholder="Address"/>

        <t:form-element label="Search" small="12" medium="6">
            <h:inputText pt:placeholder="Query"/>
            <t:commandButton value="Search"/>

Form Element

Tag name form-element
Component type io.tornadofaces.component.FormElement
Renderer type io.tornadofaces.component.FormElementRenderer
quickhelpRenders a quickhelp icon beside the label, requires label to be rendered. false
labelLabel for the form elementfalse
labelPositionLabel position. Valid options are "top", "left". Defaults to "top".false
labelClassClasses to apply to the label element.false
paddingAdd padding. Defaults to false.false
renderShould this component be rendered?false
showShow this component normally, or render an empty placeholder element. Defaults to true.false
prefixPrefix label that will be added as a span with class form-label before the input element false
suffixSuffix label that will be added as a span with class form-label after the input element false
styleClassStyles to apply to the wrapperfalse
styleCSS Styles applied to the switch.false
smallWidth in the 12 based grid for small devicesfalse
mediumWidth in the 12 based grid for medium devicesfalse
largeWidth in the 12 based grid for large devicesfalse
renderedShould this component be rendered?false

To fully understand the markup for form elements, please consult the Foundation for Apps Documentation.