>>> let labels = ["First Option", "Second Option", "Third Option"]
>>> printWidget "en" $ formify (Just $ singleChoiceAnswer 3) [[dropdown "Choose one" labels]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Choose one
    </label>
    <select id="flexident1" ...>
      <option value="1">
        First Option
      </option>
      <option value="2">
        Second Option
      </option>
      <option value="3" selected>
        Third Option
      </option>
    </select>
...
</div>

>>> let labels = ["First Option", "Second Option", "Third Option"]
>>> printWidget "en" $ formify (Just $ multipleChoiceAnswer [1,2]) [[dropdown "Choose one" labels]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Choose one
    </label>
    <select id="flexident1" ... multiple>
      <option value="1" selected>
        First Option
      </option>
      <option value="2" selected>
        Second Option
      </option>
      <option value="3">
        Third Option
      </option>
    </select>
...
</div>

>>> printWidget "en" $ formify (Just $ Hidden 3) [[single ""]]
<div class="flex-form-div">
...
    <label for="flexident1">
    </label>
    <input type="hidden" id="flexident1" ... value="3">
...
</div>

>>> printWidget "en" $ formify (Nothing @(SingleInputList String)) [[single "Input comma separated sentences"]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Input comma separated sentences
    </label>
    <input id="flexident1" ... type="text" ...>
...
</div>

Note that this does not actually enforce any kind of input syntax. The generated input itself is a simple text field. The comma separation is checked only when parsing with the matching formParser.

>>> instance BaseForm MyCoolType where baseForm = convertField toCool fromCool basisField

Renders an input field with type=number attribute, no default value and label Age.

>>> printWidget "en" $ formify (Nothing @Int) [[single "Age"]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Age
    </label>
    <input id="flexident1" name="flex1" type="number" step="1" required="" value="">
...
</div>

Renders a series of four input fields, each for the type String and organized vertically beneath each other. They are prefilled with the values given above, are assigned the Css class "helloInput" and have no labels attached to them.

>>> let defaults = ["Hallo", "Hello", "Hola", "Ciao"]
>>> printWidget "en" $ formify (Just defaults) [[listWithoutLabels Vertical 4 [("class","helloInput")]]]
<div class="flex-form-div">
...
    <input id="flexident1" name="flex1" type="text" ... value="Hallo" class="helloInput">
...
</div>
<div class="flex-form-div">
...
    <input id="flexident2" name="flex1" type="text" ... value="Hello" class="helloInput">
...
</div>
<div class="flex-form-div">
...
    <input id="flexident3" name="flex1" type="text" ... value="Hola" class="helloInput">
...
</div>
<div class="flex-form-div">
...
    <input id="flexident4" name="flex1" type="text" ... value="Ciao" class="helloInput">
...
</div>

Renders a radio button field with the given title and option labels attached. No option is selected when the form is loaded.

>>> let labels = ["this one", "or rather that one", "I just cannot decide"]
>>> printWidget "en" $ formify (Nothing @SingleChoiceSelection) [[buttons Vertical "Make your choice" labels]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Make your choice
    </label>
...
        <label for="flexident1-1">
          <div>
            <input id="flexident1-1" type="radio" ... value="1" ...>
            this one
          </div>
        </label>
...
        <label for="flexident1-2">
          <div>
            <input id="flexident1-2" type="radio" ... value="2" ...>
            or rather that one
          </div>
        </label>
...
        <label for="flexident1-3">
          <div>
            <input id="flexident1-3" type="radio" ... value="3" ...>
            I just cannot decide
          </div>
        </label>
...
</div>

>>> let labels = ["Input 1", "Input 2", "Input 3"]
>>> printWidget "en" $ formify (Nothing @[Double]) [[list Horizontal labels]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Input 1
    </label>
    <input id="flexident1" ... type="number" step="any" ...>
...
    <label for="flexident2">
      Input 2
    </label>
    <input id="flexident2" ... type="number" step="any" ...>
...
    <label for="flexident3">
      Input 3
    </label>
    <input id="flexident3" ... type="number" step="any" ...>
...
</div>

>>> instance BaseForm MyCoolType where baseForm = convertField toCool fromCool basisField
>>> instance Formify MyCoolType where formifyImplementation = formifyInstanceBasicField

>>> instance BaseForm MyCoolType where baseForm = convertField toCool fromCool basisField
>>> instance Formify (Maybe MyCoolType) where formifyImplementation = formifyInstanceOptionalField

>>> instance Formify MyType where formifyImplementation = formifyInstanceSingleChoice

>>> printWidget "en" $ formify (Just Two) [[buttonsEnum Horizontal "Choose one" (showToUniversalLabel @MyType)]]
...
<div class="flex-form-div">
...
    <label for="flexident1">
      Choose one
    </label>
...
        <label for="flexident1-1">
          <input id="flexident1-1" type="radio" ... value="1" ...>
          One
        </label>
        <label for="flexident1-2">
          <input id="flexident1-2" type="radio" ... value="2" checked ...>
          Two
        </label>
        <label for="flexident1-3">
          <input id="flexident1-3" type="radio" ... value="3" ...>
          Three
        </label>
...
</div>

>>> printWidget "en" $ formify (Just Two) [[dropdownEnum "Choose one" (showToUniversalLabel @MyType)]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Choose one
    </label>
    <select id="flexident1" ...>
      <option value="1">
        One
      </option>
      <option value="2" selected>
        Two
      </option>
      <option value="3">
        Three
      </option>
    </select>
...
</div>

>>> instance Formify [MyType] where formifyImplementation = formifyInstanceMultiChoice

>>> printWidget "en" $ formify (Just [Two,Three]) [[buttonsEnum Horizontal "Choose" (showToUniversalLabel @MyType)]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Choose
    </label>
...
...
      <label>
        <input type="checkbox" ... value="1">
        One
      </label>
      <label>
        <input type="checkbox" ... value="2" checked>
        Two
      </label>
      <label>
        <input type="checkbox" ... value="3" checked>
        Three
      </label>
...
</div>

>>> printWidget "en" $ formify (Just [Two,Three]) [[dropdownEnum "Choose some" (showToUniversalLabel @MyType)]]
<div class="flex-form-div">
...
    <label for="flexident1">
      Choose some
    </label>
    <select id="flexident1" ... multiple>
      <option value="1">
        One
      </option>
      <option value="2" selected>
        Two
      </option>
      <option value="3" selected>
        Three
      </option>
    </select>
...
</div>