Close sidebar
Filter
The filter block integrates various form elements designed to initiate filtering actions on a given set of options, enabling efficient data refinement. By strategically narrowing down choices, it optimizes user navigation, making content search more precise. This block proves indispensable for websites aiming to provide users with streamlined access to relevant information amidst a diverse range of options.
<div class="lg:flex justify-between lg:gap-10 max-lg:space-y-10">
<div>
<h5 class="mb-3 text-center">Filter Edge (Without border)</h5>
<!-- Filter edge(without border) Start -->
<div class="lg:w-72 space-y-8">
<section class="space-y-4">
<h6>Search and filter</h6>
<div class="space-y-3">
<div>
<div class="aegov-form-control">
<div class="form-control-input">
<input type="search" name="search_suffix" id="search_suffix" placeholder="Search for something">
<span class="control-suffix">
<!-- Add your SVG icon here -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle>
<line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
</svg>
</span>
</div>
</div>
</div>
</div>
</section>
<section class="space-y-4">
<h6>Directorate</h6>
<div class="space-y-3">
<div class="aegov-check-item">
<input id="all-directorate" type="checkbox" value="All Directorate">
<label for="all-directorate">All Directorate</label>
</div>
<div class="aegov-check-item">
<input id="federal-crime-security" type="checkbox" value="Federal crime security">
<label for="federal-crime-security">Federal crime security</label>
</div>
<div class="aegov-check-item">
<input id="vehicle-driver-licensing" type="checkbox" value="Vehicle and driver licensing">
<label for="vehicle-driver-licensing">Vehicle and driver licensing</label>
</div>
<div class="aegov-check-item">
<input id="civil-defence" type="checkbox" value="Civil defence">
<label for="civil-defence">Civil defence</label>
</div>
</div>
<a href="" class="text-sm no-underline">See more</a>
</section>
<section class="space-y-4">
<h6>Beneficiary</h6>
<div id="Beneficiary-toggle" class="space-y-3">
<div class="aegov-check-item">
<input id="all-beneficiaries" type="radio" name="beneficiary" value="All beneficiaries">
<label for="all-beneficiaries">All beneficiaries</label>
</div>
<div class="aegov-check-item">
<input id="Citizen" type="radio" name="beneficiary" value="Citizen">
<label for="Citizen">Citizen</label>
</div>
<div class="aegov-check-item">
<input id="Resident" type="radio" name="beneficiary" value="Resident">
<label for="Resident">Resident</label>
</div>
<div class="aegov-check-item">
<input id="Visitor" type="radio" name="beneficiary" value="Visitor">
<label for="Visitor">Visitor</label>
</div>
</div>
<a href="" class="text-sm no-underline">See more</a>
</section>
<section class="space-y-4">
<h6>Select an option</h6>
<div class="space-y-3 max-h-[32rem] overflow-auto">
<div>
<div class="aegov-form-control">
<div class="form-control-input">
<select id="country" name="country" autocomplete="country-name">
<option>United Arab Emirates</option>
<option>India</option>
<option>United Kingdom</option>
</select>
</div>
</div>
</div>
</div>
</section>
<section class="space-y-4">
<h6>A range</h6>
<div class="space-y-3">
<div>
<div class="aegov-form-control">
<div class="form-control-input items-center">
<input type="range" min="0" max="100" name="rangelem" id="rangelem" value="20" oninput="rangeelemoutput.innerHTML=value">
<output class="w-[50px] text-sm text-end h-auto bg-transparent py-1" id="rangeelemoutput">
20
</output>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Filter edge(without border) End -->
</div>
<div class="flex-1 max-lg:hidden">
<h5 class="mb-3 text-center">Your content</h5>
<!-- Your content goes here -->
<div class="border border-primary-400 rounded-2xl max-md:hidden w-full h-[calc(100%_-_2.8125rem)] bg-aeblack-50"></div>
<!-- your content end here -->
</div>
<div>
<h5 class="mb-3 text-center">Filter with border</h5>
<!-- Filter with border Start -->
<div class="lg:w-72 p-6 border border-primary-400 rounded-2xl space-y-8">
<section class="space-y-4">
<h6>Search and filter</h6>
<div class="space-y-3">
<div>
<div class="aegov-form-control">
<div class="form-control-input">
<input type="search" name="search_suffix-2" id="search_suffix-2" placeholder="Search for something">
<span class="control-suffix">
<!-- Add your SVG icon here -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<rect width="256" height="256" fill="none"></rect>
<circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></circle>
<line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></line>
</svg>
</span>
</div>
</div>
</div>
</div>
</section>
<section class="space-y-4">
<h6>Directorate</h6>
<div class="space-y-3">
<div class="aegov-check-item">
<input id="all-directorate-2" type="checkbox" value="All Directorate">
<label for="all-directorate-2">All Directorate</label>
</div>
<div class="aegov-check-item">
<input id="federal-crime-security-2" type="checkbox" value="Federal crime security">
<label for="federal-crime-security-2">Federal crime security</label>
</div>
<div class="aegov-check-item">
<input id="vehicle-driver-licensing-2" type="checkbox" value="Vehicle and driver licensing">
<label for="vehicle-driver-licensing-2">Vehicle and driver licensing</label>
</div>
<div class="aegov-check-item">
<input id="civil-defence-2" type="checkbox" value="Civil defence">
<label for="civil-defence-2">Civil defence</label>
</div>
</div>
<a href="" class="text-sm no-underline">See more</a>
</section>
<section class="space-y-4">
<h6>Beneficiary</h6>
<div id="Beneficiary-toggle" class="space-y-3">
<div class="aegov-check-item">
<input id="all-beneficiaries-2" type="radio" name="beneficiary-2" value="All beneficiaries">
<label for="all-beneficiaries-2">All beneficiaries</label>
</div>
<div class="aegov-check-item">
<input id="Citizen-2" type="radio" name="beneficiary-2" value="Citizen-2">
<label for="Citizen-2">Citizen</label>
</div>
<div class="aegov-check-item">
<input id="Resident-2" type="radio" name="beneficiary-2" value="Resident">
<label for="Resident-2">Resident</label>
</div>
<div class="aegov-check-item">
<input id="Visitor-2" type="radio" name="beneficiary-2" value="Visitor">
<label for="Visitor-2">Visitor</label>
</div>
</div>
<a href="" class="text-sm no-underline">See more</a>
</section>
<section class="space-y-4">
<h6>Select an option</h6>
<div class="space-y-3 max-h-[32rem] overflow-auto">
<div>
<div class="aegov-form-control">
<div class="form-control-input">
<select id="country" name="country" autocomplete="country-name">
<option>United Arab Emirates</option>
<option>India</option>
<option>United Kingdom</option>
</select>
</div>
</div>
</div>
</div>
</section>
<section class="space-y-4">
<h6>A range</h6>
<div class="space-y-3">
<div>
<div class="aegov-form-control">
<div class="form-control-input items-center">
<input type="range" min="0" max="100" name="rangelem2" id="rangelem2" value="20" oninput="rangeelemoutput2.innerHTML=value">
<output class="w-[50px] text-sm text-end h-auto bg-transparent py-1" id="rangeelemoutput2">
20
</output>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Filter with border End -->
</div>
</div>