StarterX static components

Text Input 

<!-- Default -->
<label class="" for="text_input">
  <input
    type="text"
    class="__field"
    name="text-input"
    id="text_input"
    placeholder="Text input placeholder "
    
  >
  </label>


<!-- Styled Placeholder Input -->
<label class="styled-input" for="text_input">
  <input
    type="text"
    class="styled-input__field"
    name="text-input"
    id="text_input"
    placeholder=" "
    required
  >
      <span class="styled-input__placeholder">Styled placeholder text input</span>
  </label>


<!-- Disabled Text Input -->
<label class="" for="text_input">
  <input
    type="text"
    class="__field"
    name="text-input"
    id="text_input"
    placeholder="Text input placeholder "
    disabled="disabled"
  >
  </label>


<label class="{{ class }}" for="{{ id }}">
  <input
    type="{{ type }}"
    class="{{ class }}__field"
    name="{{ name }}"
    id="{{ id }}"
    placeholder="{{ placeholder }} "
    {{ attr }}
  >
  {% if styled_placeholder %}
    <span class="styled-input__placeholder">{{ styled_placeholder }}</span>
  {% endif %}
</label>
 
/* Default */
{
  "label": "Text input label",
  "template": "element-checkbox",
  "name": "text-input",
  "type": "text",
  "id": "text_input",
  "placeholder": "Text input placeholder"
}


/* Styled Placeholder Input */
{
  "label": "Text input label",
  "template": "element-checkbox",
  "name": "text-input",
  "type": "text",
  "id": "text_input",
  "placeholder": null,
  "class": "styled-input",
  "attr": "required",
  "styled_placeholder": "Styled placeholder text input"
}


/* Disabled Text Input */
{
  "label": "Text input label",
  "template": "element-checkbox",
  "name": "text-input",
  "type": "text",
  "id": "text_input",
  "placeholder": "Text input placeholder",
  "attr": "disabled=\"disabled\""
}

There are no notes for this item.