<ui-field>

Text This is a text field

Email This is an email field

Password This is a password field

Radio This is a radio field Hello Bye

Checkboxes This is a checkbox fieldset Hello Bye

Select This is a select field

Search This is a search field

Telephone This is a telephone field

URL This is a URL field

Textarea This is a text area

Color This is a color field

Date This is a date field

Datetime Local This is a datetime-local field

Month This is a month field

Number This is a number field

Time This is a time field

Week This is a week field

Here is a hidden field... (hidden)

Here is a submit button

<template
  is="ui-field"
  id="string"
  type="string"
  label="string"
  info="string"
  name="string"
  value="string"
  placeholder="string"
  required="boolean"
  action="string"
  loader="string"
  legend="string"
  options="array"
>
  <div
    class="ui-field {{props.type || 'text'}}"
    if="!props.type
    || props.type === 'color'
    || props.type === 'date'
    || props.type === 'datetime-local'
    || props.type === 'email'
    || props.type === 'month'
    || props.type === 'number'
    || props.type === 'password'
    || props.type === 'search'
    || props.type === 'tel'
    || props.type === 'text'
    || props.type === 'textarea'
    || props.type === 'time'
    || props.type === 'url'
    || props.type === 'week'"
  >
    <label for="{{props.id ?? props.name || '' |> esc}}" if="props.label">
      {{props.label |> esc}}
      <span class="ui-field-required" if="props.required">*</span>
    </label>
    <small if="props.info">{{props.info |> esc}}</small>
    <input
      id="{{props.id || '' |> esc}}"
      type="{{props.type ?? 'text' |> esc}}"
      name="{{props.name || '' |> esc}}"
      value="{{props.value || '' |> esc}}"
      placeholder="{{props.placeholder || '' |> esc}}"
      if="props.type !== 'textarea'"
    />
    <textarea
      id="{{props.id || ''}}"
      name="{{props.name || '' |> esc}}"
      placeholder="{{props.placeholder || '' |> esc}}"
      if="props.type == 'textarea'"
    >
{{props.value || '' |> esc}}</textarea
    >
    <em class="{{props.name || 'field' |> esc}}-error"></em>
  </div>

  <div class="ui-field hidden" if="props.type === 'hidden'">
    <input
      id="{{props.id || '' |> esc}}"
      type="hidden"
      name="{{props.name || '' |> esc}}"
      value="{{props.value || '' |> esc}}"
    />
  </div>

  <div class="ui-field submit" if="props.type === 'submit'">
    <input
      id="{{props.id || '' |> esc}}"
      type="submit"
      name="{{props.name || '' |> esc}}"
      value="{{props.value ?? 'Submit' |> esc}}"
    />
  </div>

  <div class="ui-field file" if="props.type === 'file'">
    <input type="hidden" name="{{props.name || '' |> esc}}" />
    <label for="{{props.id ?? props.name || '' |> esc}}" if="props.label">
      {{props.label |> esc}}
    </label>
    <span class="progress"></span>
    <small if="props.info">{{props.info |> esc}}</small>
    <input
      id="{{props.id || '' |> esc}}"
      type="file"
      value="{{props.value || '' |> esc}}"
      data-action="{{props.action || '' |> esc}}"
      data-loader="{{props.loader || '' |> esc}}"
      data-name="{{props.name || '' |> esc}}"
    />
    <em class="{{props.name || '' |> esc}}-error"></em>
  </div>

  <div class="ui-field radio" if="props.type === 'radio'">
    <fieldset>
      <legend if="props.legend">{{props.legend |> esc}}</legend>
      <small if="props.info">{{props.info |> esc}}</small>
      <label
        map="option of props.options"
        if="Array.isArray(props.options) && props.options.length"
      >
        <input
          type="radio"
          name="{{option.name || '' |> esc}}"
          value="{{option.value || '' |> esc}}"
        />
        <em class="{{props.name || '' |> esc}}-error"></em>
        <span>{{option.label |> esc}}</span>
      </label>
    </fieldset>
  </div>

  <div class="ui-field checkbox" if="props.type === 'checkbox'">
    <fieldset>
      <legend if="props.legend">{{props.legend |> esc}}</legend>
      <small if="props.info">{{props.info |> esc}}</small>
      <label
        map="option of props.options"
        if="Array.isArray(props.options) && props.options.length"
      >
        <input
          type="checkbox"
          name="{{option.name || '' |> esc}}"
          value="{{option.value || '' |> esc}}"
        />
        <em class="{{props.name || '' |> esc}}-error"></em>
        <span>{{option.label |> esc}}</span>
      </label>
    </fieldset>
  </div>

  <div class="ui-field select" if="props.type === 'select'">
    <label for="{{props.id ?? props.name || '' |> esc}}" if="props.label">
      {{props.label |> esc}}
    </label>
    <small if="props.info">{{props.info |> esc}}</small>
    <select
      name="{{props.name || '' |> esc}}"
      if="Array.isArray(props.options) && props.options.length"
    >
      <option
        map="option of props.options"
        value="{{option.value || '' |> esc}}"
      >
        {{option.label || '' |> esc}}
      </option>
    </select>
    <em class="{{props.name || '' |> esc}}-error"></em>
  </div>
</template>