Woodlands.co.uk Component Library

Search

Search form which can be included in the header and on results pages.

<div class="form form--search" data-search="Show Search Filters">
    <form action="/search" method="post">
        <div class="form__inner">
            <h4 class="form--search__title">Search for woodlands</h4>

            <div class="form__field">
                <label for="form__search_location" class="form__label"><span>Location</span></label>
                <input type="text" class="form-input" id="form__search_location" name="location" placeholder="Enter location / postcode" />
            </div>

            <div class="form__field">
                <label for="form__search_type" class="form__label"><span>Type</span></label>
                <select class="form-select" id="form__search_type" name="type">
                    <option value="woodland">Woodland</option>
                    <option value="mixed deciduous">Mixed Deciduous</option>
                    <option value="coniferous">Coniferous</option>
                    <option value="coppice">Coppice</option>
                    <option value="ancient woodland">Ancient Woodland</option>
                </select>
            </div>

            <div class="form__field form__field--switch form__field--switch--reverse">
                <input type="checkbox" class="form-checkbox" id="form__search_sold" name="sold" />
                <label for="form__search_sold" class="form__label"><i></i><span>Show Sold</span></label>
            </div>

            <button class="button button--green--dark button--inline ">
                <span>Search</span>
            </button>

        </div>
    </form>

    <button class="button button--green--dark button--full button--toggle ">
        <span>Show search filters</span>
    </button>

</div>
 
<div class="form {{modifier 'form--search' modifiers}}" data-search="Show Search Filters">
    <form action="/search" method="post">
        <div class="form__inner">
            <h4 class="form--search__title">{{ title }}</h4>

            {{ render '@form--field' fields.location merge=true }}
            {{ render '@form--field--select' fields.type merge=true }}

            {{ render '@form--switch' fields.sold merge=true }}

            {{ render '@button' button merge=true }}
        </div>
    </form>

    {{ render '@button' toggle merge=true }}
</div>