+++ /dev/null
-{*
- Foundation 6 UI - Text Input Field
-
- Do not list parameters if they're false. (We're not checking for false).
-
- {$ui = [
- 'field' => string Required Name of field that holds the data or formData array,
- 'value' => string Required Value of this text element
- 'label' => string Required Label text for this field,
- 'pattern' => string Pattern attribute ( number, etc. )
- 'placeholder' => string Placeholder string,
- 'required' => boolean True if required,
- 'maxWidth' => string Size of input field using standard style notation ('900px', '15rem', ...),
- 'maxLength' => integer Maximum number of characters that may be entered,
- 'helpText' => string Help text for this input,
- 'errorText' => string Error text that appears when the field doesn't validate,
- 'dataError' => string Error from data Abstract Class
- 'tip' => string String to display when hover over question mark on right
- 'class' => string Additional Classes for the main cell div
- 'inputClass' => string Additional Classes for the input
- ]}
-*}
-<div class="cell small-12 glm-f6-ui-field {$ui.class|default:''}">
- {if (!isset($ui.value) && !isset($ui.field)) || !isset($ui.label)}
- <span class="glm-required">Field Error: Required field information not supplied!</span>
- {else}
- <div class="grid-x grid-margin-x">
- <div class="cell small-12">
- {if isset($ui.tip)}
- <span style="float:right;" data-tooltip aria-haspopup="true" class="has-tip" data-disable-hover="false" title="{$ui.tip}">?</span>
- {/if}
- <label for="{$ui.field}" class="{if $ui.required} glm-required{/if} glm-f6-ui-field-label">{$ui.label}</label>
- </div>
- <div class="cell small-12">
- <input
- class="glm-f6-ui-field-input {$ui.inputClass|default:''}"
- type="date"
- id="{$ui.field}"
- name="{$ui.field}"
- value="{$ui.value|escape}"
- {if !empty($ui.pattern)}pattern="{$ui.pattern}"{/if}
- {if !empty($ui.required)}required{/if}
- {if !empty($ui.placeholder)}placeholder="{$ui.placeholder}"{/if}
- {if !empty($ui.errorText)}aria-errormessage="{$ui.field}_ErrorText"{/if}
- {if !empty($ui.helpText)}aria-describedby="{$ui.field}_HelpText"{/if}
- {if !empty($ui.maxWidth)}style="max-width: {$ui.maxWidth}"{/if}
- {if !empty($ui.maxLength)}max-length="{$ui.maxLength}"{/if}
- />
- </div>
- <div class="cell small-12 glm-f6-ui-field-messages">
- {if !empty($ui.dataError)}<span class="form-error is-visible glm-f6-ui-field-data-error">{$ui.dataError}</span>{/if}
- {if !empty($ui.errorText)}<span id="{$ui.field}_ErrorText" class="form-error glm-f6-ui-field-error-text" data-form-error-for="{$ui.field}">{$ui.errorText}</span>{/if}
- {if !empty($ui.helpText)}<span class="glm-f6-ui-field-help-text" id="{$ui.field}_HelpText">{$ui.helpText}<br></span>{/if}
- </div>
- </div>
- {/if}
-</div>