FormIt and & Datalist Inputs

Support Extras
1

I want to try adding a datalist field to our site to allow users to either select a value or enter their own. I can’t seem to find any information regarding datalist input and using formit. Is the following the correct syntax?
Thanks!

<div class="mb-3">
    <label for="pronouns" class="form-label">
        Choose your pronouns or enter your own!</label>
        <span class="text-danger fw-bolder">[[!+fi.error.Pronouns]]</span>
    <input list="pronouns" name="pronouns" id="browser" class="form-control">
    <datalist id="pronouns">
        <option value="He/Him" [[!+fi.Pronouns:FormItIsSelected=`He/Him`]]>
        <option value="She/Her" [[!+fi.Pronouns:FormItIsSelected=`She/Her`]]>
        <option value="They/Them" [[!+fi.Pronouns:FormItIsSelected=`They/Them`]]>
    </datalist>
2 
<div class="mb-3">
    <label for="pronouns" class="form-label">
        Choose your pronouns or enter your own!
    </label>
    <span class="text-danger fw-bolder">[[!+fi.error.pronouns]]</span>
    
    <input 
        list="pronouns-list"
        name="pronouns"
        id="pronouns"
        class="form-control"
        value="[[!+fi.pronouns]]"
    >
    
    <datalist id="pronouns-list">
        <option value="He/Him">
        <option value="She/Her">
        <option value="They/Them">
    </datalist>
</div>

not testet

2 Likes
3

Thank you that worked!

4

Hey Raffenberg, just wanted to say thanks for sharing that example. I was running into the same issue with datalist and FormIt, and your markup cleared things up. Appreciate you including the corrected syntax with the value binding, super helpful!

2 Likes