---
title: Form Control
desc: Label positions and fieldset group options.
ico: mdi:grid
keywords:
  - form
  - label
  - utility

props:
  - class: .prs-form-control
    type: component
    desc: Container for <label>
  - class: .prs-form-control-col
    type: component
    desc: Column container for <label>
  - class: .prs-label
    type: part
    desc: Label styles
  - class: .prs-label-alt
    type: part
    desc: For use within the column container
  - class: .prs-label-text
    type: part
    desc: Label text styles
  - class: .prs-label-text-alt
    type: part
    desc: For use within the column container.

alert:
  ico: mdi:wheelchair-accessibility
  body: |
    **For best accessibility:**  
    Make sure your **label** uses a **for** attribute that ties to your input **id** so the user can click on the label to give focus to the input.

controls:
  - name: label
    type: text
    label: Label
    desc: As always, keep it simple.
    default: Label

  - name: input
    type: select
    label: Input type
    desc: Choose from a variety of input types.
    default: text
    options:
      - text
      - select
      - textarea
      - checkboxes
      - radios
      - toggle

  - name: showAlt
    type: toggle
    label: Supplementary labels
    desc: Extra labels for secondary information like character counts, help, etc.
    default: false

  - name: showValidated
    type: toggle
    label: Show validation
    desc: Validation message.
    default: false

  - name: column
    type: toggle
    label: Column layout
    desc: An alternate column layout for a visually appealing and condensed way of including more instructions/details in your forms. Works best with supplementary labels.
    default: false

preview: |
  <div class="w-screen" :class="column ? 'max-w-3xl' : 'max-w-xs'"> <!-- <- this is just for demo purposes -->
    <div :class="column ? 'prs-form-control-col' : 'prs-form-control'">
      <div class="prs-label" :class="column && 'prs-label-col'">
        <label :for="'input-'+ input" class="prs-label-text" x-text="label"></label>
        <span x-show="showAlt" class="prs-label-text" :class="column && 'prs-label-text-sub'" x-text="column ? 'Some sub text to better instruct the user on how to fill out the fieldset.' : 'Alt'"></span>
      </div>
      <div class="prs-form-control">
        <input x-show="input === 'text'" type="text" :id="'input-'+ input" class="prs-input" placeholder="Input" />
        <select x-show="input === 'select'" :id="'input-'+ input" class="prs-input prs-select"><option selected disabled>Choose:</option></select>
        <textarea x-show="input === 'textarea'" :id="'input-'+ input" class="prs-input" placeholder="Textarea"></textarea>
        <template x-for="i in 3" :key="input +'-'+ i">
          <label x-show="input === 'radios'" class="prs-radio-label"><input type="radio" :id="i === 1 ? ('input-'+ input) : false" name="myRadios" class="prs-radio" /> <span class="prs-label-text">Some label</span></label>
        </template>
        <template x-for="i in 3" :key="input +'-'+ i">
          <label x-show="input === 'checkboxes'" class="prs-checkbox-label"><input type="checkbox" :id="i === 1 ? ('input-'+ input) : false" class="prs-checkbox" /> <span class="prs-label-text">Some label</span></label>
        </template>
        <div x-show="input === 'toggle'">
          <label class="prs-toggle-label">
            <input type="checkbox" :id="'input-'+ input" class="prs-toggle" />
            <!-- <span class="prs-label-text">Toggle</span> -->
          </label>
        </div>
        <div class="prs-label">
          <span x-show="showAlt || showValidated" class="prs-label-text" :class="showValidated && 'prs-label-error'" x-text="showValidated ? 'Validation message' : 'Alt'"></span>
          <span x-show="showAlt" class="prs-label-text">Alt</span>
        </div>
      </div>
    </div>
  </div>

code:
  html: |
    <div class="{column}">
      <div class="prs-label{columnLabel}">
        <label for="uniqueID" class="prs-label-text">{label}</label>{alt_1}
      </div>
      <div class="prs-form-control">
        {inputText}{inputSelect}{inputTextarea}{inputCheckboxes}{inputRadios}{inputToggle}{alt_2}
      </div>
    </div>
  logic:
    label: "this.label"
    column: "this.column ? 'prs-form-control-col' : 'prs-form-control'"
    columnLabel: "this.column ? '-col' : ''"
    inputText: "this.input === 'text' ? '<input type=\"text\" id=\"uniqueID\" class=\"prs-input\" />' : ''"
    inputSelect: "this.input === 'select' ? '<select id=\"uniqueID\" class=\"prs-input prs-select\">...</select>' : ''"
    inputTextarea: "this.input === 'textarea' ? '<textarea id=\"uniqueID\" class=\"prs-input\"></textarea>' : ''"
    inputCheckboxes: "this.input === 'checkboxes' ? '<label class=\"prs-checkbox-label\"><input type=\"checkbox\" id=\"uniqueID\" class=\"prs-checkbox\" /> Label text</label>\\n    ...' : ''"
    inputRadios: "this.input === 'radios' ? '<label class=\"prs-radio-label\"><input type=\"radio\" id=\"uniqueID\" class=\"prs-radio\" /> Label text</label>\\n    ...' : ''"
    inputToggle: "this.input === 'toggle' ? '<label class=\"prs-toggle-label\"><input type=\"checkbox\" id=\"uniqueID\" class=\"prs-toggle\" /></label>' : ''"
    alt_1: "this.showAlt ? '\\n    <span class=\"prs-label-text{altCol}\">Supplementary label</span>' : ''"
    alt_2: "this.showAlt || this.showValidated ? '\\n    <div class=\"prs-label\">\\n      <span class=\"prs-label-text{validated}\">Supplementary label</span>{altVal}\\n    </div>' : ''"
    altVal: "!this.showAlt && this.showValidated ? '' : '\\n      <span class=\"prs-label-text\">Supplementary label</span>'"
    altCol: "this.column ? ' prs-label-text-sub' : ''"
    validated: "this.showValidated ? ' prs-label-error' : ''"
---