Filters is a composite component that filters the items of a list or table.
The way that users interact with filters depends on the components that you decide to incorporate. In its simplest form, filters includes a text field that autocompletes to a defined set of filters. What the filters are and how they’re exposed to users is flexible.
A single-selection filter is employed when the user can pick only one attribute from a category to modify the data results. Under the hood, single selection behaves like a radio button. Ways in which a single selection filter can manifest include:
The Global Filter component is a good example, it should be at the top of the page, where it’s highly discoverable and always available for your users.
<div class="c-global-filter ">
<label for="filters" class="c-global-filter__label">Global filter label</label>
<input class="c-input c-global-filter__input" id="filters" placeholder="Type in to filter..." value="" type="text">
</div>
A multi-selection filter is employed when the user has the option to pick more than one attribute from a category to modify the data results. Under the hood, multi-selections behave like checkboxes. Ways in which a single selection filter can manifest include:
A good example of a multi-selection is the Filter box component, where it uses the power multi-select input. Where you can add multiple options on each field.
Please specify the required date range wanted, optionally you can also enter the attributes in the fields you need to filter to show up on your report.
<section class="c-filter-box o-grid">
<p class="c-filter-box__description o-grid__span-col--8@medium">Please specify the required date range wanted, optionally you can also enter the attributes in the fields you need to filter to show up on your report.</p>
<div class="o-grid__span-col--4@medium o-grid o-grid--auto--sm">
<div class="o-stack--xs">
<label for="start-date" class="o-label">Start date</label>
<!-- Input starts -->
<input type="text" class="c-input" id="start-date" placeholder="April 15, 2019" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="end-date" class="o-label">End date</label>
<!-- Input starts -->
<input type="text" class="c-input" id="end-date" placeholder="May 15, 2019" value="">
<!-- Input ends -->
</div>
</div>
<div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
<label for="company" class="o-label">Company</label>
<!-- Input starts -->
<input type="text" class="c-input" id="company" placeholder="Type company name" value="">
<!-- Input ends -->
</div>
<div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
<label for="facility" class="o-label">Facility</label>
<!-- Input starts -->
<input type="text" class="c-input" id="facility" placeholder="Type facility name" value="">
<!-- Input ends -->
</div>
<div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
<label for="well" class="o-label">Well</label>
<!-- Input starts -->
<input type="text" class="c-input" id="well" placeholder="Type well name" value="">
<!-- Input ends -->
</div>
<div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
<label for="product" class="o-label">Product</label>
<!-- Input starts -->
<input type="text" class="c-input" id="product" placeholder="Tubing, Rod, Coupling" value="">
<!-- Input ends -->
</div>
<div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
<label for="rack" class="o-label">Rack</label>
<!-- Input starts -->
<input type="text" class="c-input" id="rack" placeholder="Type rack number" value="">
<!-- Input ends -->
</div>
<div class="o-grid__span-col--6@small o-grid__span-col--4@medium o-stack--xs">
<label for="size" class="o-label">Size</label>
<!-- Input starts -->
<input type="text" class="c-input" id="size" placeholder="2-3/8”, 2-7/8”, 3/4”, 7/8”" value="">
<!-- Input ends -->
</div>
<div class="u-d-flex">
<button class="c-btn c-btn--primary c-btn--xs u-mr-auto">Update Filters</button>
<button class="c-btn c-btn--link c-btn--link--no-underline c-btn--xs u-ml-auto u-p-0 u-text-right js-extra-filters">Show more item filters</button>
</div>
<section class="o-grid o-grid--auto--lg o-grid--fix--4@large c-filter-box__extra-filters">
<div class="o-stack--xs">
<label for="grade" class="o-label">Grade</label>
<!-- Input starts -->
<input type="text" class="c-input" id="grade" placeholder="J-55, L-80, D, KD, HS" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="APIgrade" class="o-label">API Grade</label>
<!-- Input starts -->
<input type="text" class="c-input" id="APIgrade" placeholder="Type API Grade" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="coating" class="o-label">Coating</label>
<!-- Input starts -->
<input type="text" class="c-input" id="coating" placeholder="Type coating" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="mill" class="o-label">Mill</label>
<!-- Input starts -->
<input type="text" class="c-input" id="mill" placeholder="Type mill" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="range" class="o-label">Range</label>
<!-- Input starts -->
<input type="text" class="c-input" id="range" placeholder="Type Range" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="seam" class="o-label">Seam</label>
<!-- Input starts -->
<input type="text" class="c-input" id="seam" placeholder="Type seam" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="connection" class="o-label">Connection</label>
<!-- Input starts -->
<input type="text" class="c-input" id="connection" placeholder="Type connection" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="couplingMft" class="o-label">Coupling manufacturer</label>
<!-- Input starts -->
<input type="text" class="c-input" id="couplingMft" placeholder="Type coupling manufacturer" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="guideMft" class="o-label">Guide manufacturer</label>
<!-- Input starts -->
<input type="text" class="c-input" id="guideMft" placeholder="Type guide manufacturer" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="rodMft" class="o-label">Rod manufacturer</label>
<!-- Input starts -->
<input type="text" class="c-input" id="rodMft" placeholder="Type rod manufacturer" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="thread" class="o-label">Thread</label>
<!-- Input starts -->
<input type="text" class="c-input" id="thread" placeholder="Type thread" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="guide" class="o-label">Guide</label>
<!-- Input starts -->
<input type="text" class="c-input" id="guide" placeholder="Type guide" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="guidePer" class="o-label">Guide Per</label>
<!-- Input starts -->
<input type="text" class="c-input" id="guidePer" placeholder="Type guide per" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="guidePolymer" class="o-label">Guide polymer</label>
<!-- Input starts -->
<input type="text" class="c-input" id="guidePolymer" placeholder="Type guide polymer" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="guideSize" class="o-label">Guide size</label>
<!-- Input starts -->
<input type="text" class="c-input" id="guideSize" placeholder="Type guide size" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<label for="guideType" class="o-label">Guide type</label>
<!-- Input starts -->
<input type="text" class="c-input" id="guideType" placeholder="Type guide type" value="">
<!-- Input ends -->
</div>
</section>
</section>