Search

Component to help the user search for a specific item within a large data structure. This component contains a very well expanded search field and various supporting form fields with their own behaviour. The core of this component is the search field which will display a list of options to choose from and multiple options can be combined to help the user find what he is looking for.

Loading

px 

			
				<div class="o-search js-search ">
	<form class="o-search__form">
		<div class="m-formfield-flyout js-formfield-flyout o-search__suggest m-formfield-flyout--align-left undefined">
			<div class="a-formfield  m-formfield-flyout__trigger undefined ">
				<div class="a-formfield__header">
					<label class="a-formfield__label " for="">
						Zoekterm *
					</label>
				</div>
				<div class="a-formfield__wrapper a-formfield__wrapper--with-icon-before a-formfield__wrapper--with-icon-after  ">
					<span class="a-formfield__icon-before icon-search"></span>
					<input class="a-formfield__input" type="text" name="" id="" placeholder="Opleiding, themas, trefwoord of code zoeken" value="" />
					<span class="a-formfield__icon-after icon-cancel-circle"></span>
				</div>
			</div>
			<div class="m-formfield-flyout__content">
				<div class="m-formfield-flyout__content-container">
					<div class="a-loader ">
						<div class="a-loader__dots">
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
						</div>
						<p class="a-loader__feedback">Trefwoorden op basis van jouw zoekterm &#39;Excel&#39;</p>
					</div>
				</div>
			</div>
		</div>
		<div class="o-search__container l-container@below-viewport-9">
			<div class="o-search__fields l-grid l-grid--with-spacing l-grid--auto@viewport-9 u-margin-none@above-viewport-9">
				<div class="o-search__item l-grid__col l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="m-formfield-flyout js-formfield-flyout ">
						<div class="a-formfield  m-formfield-flyout__trigger a-formfield--straight-corners@above-viewport-9 ">
							<div class="a-formfield__header">
								<label class="a-formfield__label " for="">
									In de buurt van
								</label>
							</div>
							<div class="a-formfield__wrapper    ">
								<input class="a-formfield__input" type="" name="" id="" placeholder="vb. Brussel" value="" />
							</div>
						</div>
						<div class="m-formfield-flyout__content">
							<div class="m-formfield-flyout__content-container">
								<ul class="m-highlight-list ">
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										mechelen
									</li>
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										eik
									</li>
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										kantje
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col--6 l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="a-formfield  js-input-datepicker a-formfield--date a-formfield--straight-corners@above-viewport-9 ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="search-from">
								Vanaf
							</label>
						</div>
						<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
							<input class="a-formfield__input" type="date" name="search-from" id="search-from" placeholder="dd/mm/yyyy" value="" />
							<span class="a-formfield__icon-after icon-calendar"></span>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col--6 l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="a-formfield  js-input-datepicker a-formfield--date a-formfield--straight-corners@above-viewport-9 ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="search-to">
								Tot
							</label>
						</div>
						<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
							<input class="a-formfield__input" type="date" name="search-to" id="search-to" placeholder="dd/mm/yyyy" value="" />
							<span class="a-formfield__icon-after icon-calendar"></span>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="m-formfield-flyout js-formfield-flyout ">
						<div class="a-formfield  m-formfield-flyout__trigger a-formfield--straight-corners@above-viewport-9 ">
							<div class="a-formfield__header">
								<label class="a-formfield__label " for="">
									Ik zoek als *
								</label>
								<div class="a-formfield__tooltip">
									<div class="m-tooltip js-tooltip m-tooltip__trigger m-tooltip--top">
										<div class="m-tooltip__container">
											<span class="a-badge a-badge--theme-purple m-tooltip__icon">
												?
											</span>
											<div class="m-tooltip__flyout">
												<div class="m-tooltip__backdrop u-hide@above-viewport-9"></div>
												<div class="m-tooltip__content">
													<button class="a-icon-button a-icon-button--animated a-icon-button--inverted m-tooltip__close u-hide@above-viewport-9 ">
														<span class="a-icon-button__icon icon-cancel"></span>
													</button>
													<p class="m-tooltip__text">Om zoekresultaten relevant voor u te maken, bent u verplicht uw doelgroep te kiezen</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
								<input class="a-formfield__input" type="" name="" id="" placeholder="Maak een keuze" value="" readonly />
								<span class="a-formfield__icon-after icon-arrow-down"></span>
							</div>
						</div>
						<div class="m-formfield-flyout__content">
							<div class="m-formfield-flyout__content-container">
								<ul class="m-choice-list ">
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" checked type="radio" id="choice-list-default-1" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-1">
											Voor mezelf als bediende
										</label>
									</li>
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" type="radio" id="choice-list-default-2" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-2">
											Voor mezelf als werkzoekende
										</label>
									</li>
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" type="radio" id="choice-list-default-3" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-3">
											Als verantwoordelijke voor een collega
										</label>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<button type="submit" class="a-button o-search__submit u-width-100@below-viewport-9">
				<span class="a-button__icon icon-search"></span>
				<span class="a-button__text">Bekijk resultaten</span>
			</button>
		</div>
	</form>
	<div class="o-search__feedback">
		<div class="a-loader ">
			<div class="a-loader__dots">
				<div class="a-loader__shape">
					<span class="a-loader__dot"></span>
				</div>
				<div class="a-loader__shape">
					<span class="a-loader__dot"></span>
				</div>
				<div class="a-loader__shape">
					<span class="a-loader__dot"></span>
				</div>
				<div class="a-loader__shape">
					<span class="a-loader__dot"></span>
				</div>
				<div class="a-loader__shape">
					<span class="a-loader__dot"></span>
				</div>
				<div class="a-loader__shape">
					<span class="a-loader__dot"></span>
				</div>
				<div class="a-loader__shape">
					<span class="a-loader__dot"></span>
				</div>
				<div class="a-loader__shape">
					<span class="a-loader__dot"></span>
				</div>
				<div class="a-loader__shape">
					<span class="a-loader__dot"></span>
				</div>
			</div>
			<p class="a-loader__feedback">Resultaten ophalen</p>
		</div>
	</div>
</div>

Results

px 

			
				<div class="o-search js-search ">
	<form class="o-search__form">
		<div class="m-formfield-flyout js-formfield-flyout o-search__suggest m-formfield-flyout--align-left undefined">
			<div class="a-formfield  m-formfield-flyout__trigger undefined ">
				<div class="a-formfield__header">
					<label class="a-formfield__label " for="">
						Zoekterm *
					</label>
				</div>
				<div class="a-formfield__wrapper a-formfield__wrapper--with-icon-before a-formfield__wrapper--with-icon-after  ">
					<span class="a-formfield__icon-before icon-search"></span>
					<input class="a-formfield__input" type="text" name="" id="" placeholder="Opleiding, themas, trefwoord of code zoeken" value="" />
					<span class="a-formfield__icon-after icon-cancel-circle"></span>
				</div>
			</div>
			<div class="m-formfield-flyout__content">
				<div class="m-formfield-flyout__content-container">
					<div class="a-loader ">
						<div class="a-loader__dots">
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
						</div>
						<p class="a-loader__feedback">Trefwoorden op basis van jouw zoekterm &#39;Excel&#39;</p>
					</div>
				</div>
			</div>
		</div>
		<div class="o-search__container l-container@below-viewport-9">
			<div class="o-search__fields l-grid l-grid--with-spacing l-grid--auto@viewport-9 u-margin-none@above-viewport-9">
				<div class="o-search__item l-grid__col l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="m-formfield-flyout js-formfield-flyout ">
						<div class="a-formfield  m-formfield-flyout__trigger a-formfield--straight-corners@above-viewport-9 ">
							<div class="a-formfield__header">
								<label class="a-formfield__label " for="">
									In de buurt van
								</label>
							</div>
							<div class="a-formfield__wrapper    ">
								<input class="a-formfield__input" type="" name="" id="" placeholder="vb. Brussel" value="" />
							</div>
						</div>
						<div class="m-formfield-flyout__content">
							<div class="m-formfield-flyout__content-container">
								<ul class="m-highlight-list ">
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										mechelen
									</li>
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										eik
									</li>
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										kantje
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col--6 l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="a-formfield  js-input-datepicker a-formfield--date a-formfield--straight-corners@above-viewport-9 ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="search-from">
								Vanaf
							</label>
						</div>
						<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
							<input class="a-formfield__input" type="date" name="search-from" id="search-from" placeholder="dd/mm/yyyy" value="" />
							<span class="a-formfield__icon-after icon-calendar"></span>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col--6 l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="a-formfield  js-input-datepicker a-formfield--date a-formfield--straight-corners@above-viewport-9 ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="search-to">
								Tot
							</label>
						</div>
						<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
							<input class="a-formfield__input" type="date" name="search-to" id="search-to" placeholder="dd/mm/yyyy" value="" />
							<span class="a-formfield__icon-after icon-calendar"></span>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="m-formfield-flyout js-formfield-flyout ">
						<div class="a-formfield  m-formfield-flyout__trigger a-formfield--straight-corners@above-viewport-9 ">
							<div class="a-formfield__header">
								<label class="a-formfield__label " for="">
									Ik zoek als *
								</label>
								<div class="a-formfield__tooltip">
									<div class="m-tooltip js-tooltip m-tooltip__trigger m-tooltip--top">
										<div class="m-tooltip__container">
											<span class="a-badge a-badge--theme-purple m-tooltip__icon">
												?
											</span>
											<div class="m-tooltip__flyout">
												<div class="m-tooltip__backdrop u-hide@above-viewport-9"></div>
												<div class="m-tooltip__content">
													<button class="a-icon-button a-icon-button--animated a-icon-button--inverted m-tooltip__close u-hide@above-viewport-9 ">
														<span class="a-icon-button__icon icon-cancel"></span>
													</button>
													<p class="m-tooltip__text">Om zoekresultaten relevant voor u te maken, bent u verplicht uw doelgroep te kiezen</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
								<input class="a-formfield__input" type="" name="" id="" placeholder="Maak een keuze" value="" readonly />
								<span class="a-formfield__icon-after icon-arrow-down"></span>
							</div>
						</div>
						<div class="m-formfield-flyout__content">
							<div class="m-formfield-flyout__content-container">
								<ul class="m-choice-list ">
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" checked type="radio" id="choice-list-default-1" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-1">
											Voor mezelf als bediende
										</label>
									</li>
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" type="radio" id="choice-list-default-2" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-2">
											Voor mezelf als werkzoekende
										</label>
									</li>
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" type="radio" id="choice-list-default-3" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-3">
											Als verantwoordelijke voor een collega
										</label>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<button type="submit" class="a-button o-search__submit u-width-100@below-viewport-9">
				<span class="a-button__icon icon-search"></span>
				<span class="a-button__text">Bekijk resultaten</span>
			</button>
		</div>
	</form>
	<p class="o-search__feedback">Er werden 38 resultaten gevonden voor &#39;Excel&#39; &amp; &#39;Administratie&#39;</p>
</div>

States

px 

			
				<div class="o-search js-search ">
	<form class="o-search__form">
		<div class="m-formfield-flyout js-formfield-flyout o-search__suggest m-formfield-flyout--align-left is-error">
			<div class="a-formfield  m-formfield-flyout__trigger is-error ">
				<div class="a-formfield__header">
					<label class="a-formfield__label " for="">
						Zoekterm *
					</label>
				</div>
				<div class="a-formfield__wrapper a-formfield__wrapper--with-icon-before a-formfield__wrapper--with-icon-after  ">
					<span class="a-formfield__icon-before icon-search"></span>
					<input class="a-formfield__input" type="text" name="" id="" placeholder="Opleiding, themas, trefwoord of code zoeken" value="" />
					<span class="a-formfield__icon-after icon-cancel-circle"></span>
				</div>
			</div>
			<div class="m-formfield-flyout__content">
				<p class="m-formfield-flyout__message">sommige karakters zijn niet toegestaan.</p>
			</div>
		</div>
		<div class="o-search__container l-container@below-viewport-9">
			<div class="o-search__fields l-grid l-grid--with-spacing l-grid--auto@viewport-9 u-margin-none@above-viewport-9">
				<div class="o-search__item l-grid__col l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="m-formfield-flyout js-formfield-flyout ">
						<div class="a-formfield  m-formfield-flyout__trigger a-formfield--straight-corners@above-viewport-9 ">
							<div class="a-formfield__header">
								<label class="a-formfield__label " for="">
									In de buurt van
								</label>
							</div>
							<div class="a-formfield__wrapper    ">
								<input class="a-formfield__input" type="" name="" id="" placeholder="vb. Brussel" value="" />
							</div>
						</div>
						<div class="m-formfield-flyout__content">
							<div class="m-formfield-flyout__content-container">
								<ul class="m-highlight-list ">
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										mechelen
									</li>
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										eik
									</li>
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										kantje
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col--6 l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="a-formfield  js-input-datepicker a-formfield--date a-formfield--straight-corners@above-viewport-9 ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="search-from">
								Vanaf
							</label>
						</div>
						<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
							<input class="a-formfield__input" type="date" name="search-from" id="search-from" placeholder="dd/mm/yyyy" value="" />
							<span class="a-formfield__icon-after icon-calendar"></span>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col--6 l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="a-formfield  js-input-datepicker a-formfield--date a-formfield--straight-corners@above-viewport-9 ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="search-to">
								Tot
							</label>
						</div>
						<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
							<input class="a-formfield__input" type="date" name="search-to" id="search-to" placeholder="dd/mm/yyyy" value="" />
							<span class="a-formfield__icon-after icon-calendar"></span>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="m-formfield-flyout js-formfield-flyout ">
						<div class="a-formfield  m-formfield-flyout__trigger a-formfield--straight-corners@above-viewport-9 ">
							<div class="a-formfield__header">
								<label class="a-formfield__label " for="">
									Ik zoek als *
								</label>
								<div class="a-formfield__tooltip">
									<div class="m-tooltip js-tooltip m-tooltip__trigger m-tooltip--top">
										<div class="m-tooltip__container">
											<span class="a-badge a-badge--theme-purple m-tooltip__icon">
												?
											</span>
											<div class="m-tooltip__flyout">
												<div class="m-tooltip__backdrop u-hide@above-viewport-9"></div>
												<div class="m-tooltip__content">
													<button class="a-icon-button a-icon-button--animated a-icon-button--inverted m-tooltip__close u-hide@above-viewport-9 ">
														<span class="a-icon-button__icon icon-cancel"></span>
													</button>
													<p class="m-tooltip__text">Om zoekresultaten relevant voor u te maken, bent u verplicht uw doelgroep te kiezen</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
								<input class="a-formfield__input" type="" name="" id="" placeholder="Maak een keuze" value="" readonly />
								<span class="a-formfield__icon-after icon-arrow-down"></span>
							</div>
						</div>
						<div class="m-formfield-flyout__content">
							<div class="m-formfield-flyout__content-container">
								<ul class="m-choice-list ">
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" checked type="radio" id="choice-list-default-1" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-1">
											Voor mezelf als bediende
										</label>
									</li>
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" type="radio" id="choice-list-default-2" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-2">
											Voor mezelf als werkzoekende
										</label>
									</li>
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" type="radio" id="choice-list-default-3" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-3">
											Als verantwoordelijke voor een collega
										</label>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<button type="submit" class="a-button o-search__submit u-width-100@below-viewport-9">
				<span class="a-button__icon icon-search"></span>
				<span class="a-button__text">Bekijk resultaten</span>
			</button>
		</div>
	</form>
</div>

Suggest loading

px 

			
				<div class="o-search js-search ">
	<form class="o-search__form">
		<div class="m-formfield-flyout js-formfield-flyout o-search__suggest m-formfield-flyout--align-left undefined">
			<div class="a-formfield  m-formfield-flyout__trigger undefined ">
				<div class="a-formfield__header">
					<label class="a-formfield__label " for="">
						Zoekterm *
					</label>
				</div>
				<div class="a-formfield__wrapper a-formfield__wrapper--with-icon-before a-formfield__wrapper--with-icon-after  ">
					<span class="a-formfield__icon-before icon-search"></span>
					<input class="a-formfield__input" type="text" name="" id="" placeholder="Opleiding, themas, trefwoord of code zoeken" value="" />
					<span class="a-formfield__icon-after icon-cancel-circle"></span>
				</div>
			</div>
			<div class="m-formfield-flyout__content">
				<div class="m-formfield-flyout__content-container">
					<div class="a-loader ">
						<div class="a-loader__dots">
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
						</div>
						<p class="a-loader__feedback">Trefwoorden op basis van jouw zoekterm &#39;Excel&#39;</p>
					</div>
				</div>
			</div>
		</div>
		<div class="o-search__container l-container@below-viewport-9">
			<div class="o-search__fields l-grid l-grid--with-spacing l-grid--auto@viewport-9 u-margin-none@above-viewport-9">
				<div class="o-search__item l-grid__col l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="m-formfield-flyout js-formfield-flyout ">
						<div class="a-formfield  m-formfield-flyout__trigger a-formfield--straight-corners@above-viewport-9 ">
							<div class="a-formfield__header">
								<label class="a-formfield__label " for="">
									In de buurt van
								</label>
							</div>
							<div class="a-formfield__wrapper    ">
								<input class="a-formfield__input" type="" name="" id="" placeholder="vb. Brussel" value="" />
							</div>
						</div>
						<div class="m-formfield-flyout__content">
							<div class="m-formfield-flyout__content-container">
								<ul class="m-highlight-list ">
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										mechelen
									</li>
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										eik
									</li>
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										kantje
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col--6 l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="a-formfield  js-input-datepicker a-formfield--date a-formfield--straight-corners@above-viewport-9 ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="search-from">
								Vanaf
							</label>
						</div>
						<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
							<input class="a-formfield__input" type="date" name="search-from" id="search-from" placeholder="dd/mm/yyyy" value="" />
							<span class="a-formfield__icon-after icon-calendar"></span>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col--6 l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="a-formfield  js-input-datepicker a-formfield--date a-formfield--straight-corners@above-viewport-9 ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="search-to">
								Tot
							</label>
						</div>
						<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
							<input class="a-formfield__input" type="date" name="search-to" id="search-to" placeholder="dd/mm/yyyy" value="" />
							<span class="a-formfield__icon-after icon-calendar"></span>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="m-formfield-flyout js-formfield-flyout ">
						<div class="a-formfield  m-formfield-flyout__trigger a-formfield--straight-corners@above-viewport-9 ">
							<div class="a-formfield__header">
								<label class="a-formfield__label " for="">
									Ik zoek als *
								</label>
								<div class="a-formfield__tooltip">
									<div class="m-tooltip js-tooltip m-tooltip__trigger m-tooltip--top">
										<div class="m-tooltip__container">
											<span class="a-badge a-badge--theme-purple m-tooltip__icon">
												?
											</span>
											<div class="m-tooltip__flyout">
												<div class="m-tooltip__backdrop u-hide@above-viewport-9"></div>
												<div class="m-tooltip__content">
													<button class="a-icon-button a-icon-button--animated a-icon-button--inverted m-tooltip__close u-hide@above-viewport-9 ">
														<span class="a-icon-button__icon icon-cancel"></span>
													</button>
													<p class="m-tooltip__text">Om zoekresultaten relevant voor u te maken, bent u verplicht uw doelgroep te kiezen</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
								<input class="a-formfield__input" type="" name="" id="" placeholder="Maak een keuze" value="" readonly />
								<span class="a-formfield__icon-after icon-arrow-down"></span>
							</div>
						</div>
						<div class="m-formfield-flyout__content">
							<div class="m-formfield-flyout__content-container">
								<ul class="m-choice-list ">
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" checked type="radio" id="choice-list-default-1" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-1">
											Voor mezelf als bediende
										</label>
									</li>
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" type="radio" id="choice-list-default-2" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-2">
											Voor mezelf als werkzoekende
										</label>
									</li>
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" type="radio" id="choice-list-default-3" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-3">
											Als verantwoordelijke voor een collega
										</label>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<button type="submit" class="a-button o-search__submit u-width-100@below-viewport-9">
				<span class="a-button__icon icon-search"></span>
				<span class="a-button__text">Bekijk resultaten</span>
			</button>
		</div>
	</form>
</div>

Suggest result

px 

			
				<div class="o-search js-search ">
	<form class="o-search__form">
		<div class="m-formfield-flyout js-formfield-flyout o-search__suggest m-formfield-flyout--align-left undefined">
			<div class="a-formfield  m-formfield-flyout__trigger undefined ">
				<div class="a-formfield__header">
					<label class="a-formfield__label " for="">
						Zoekterm *
					</label>
				</div>
				<div class="a-formfield__wrapper a-formfield__wrapper--with-icon-before a-formfield__wrapper--with-icon-after  ">
					<span class="a-formfield__icon-before icon-search"></span>
					<input class="a-formfield__input" type="text" name="" id="" placeholder="Opleiding, themas, trefwoord of code zoeken" value="" />
					<span class="a-formfield__icon-after icon-cancel-circle"></span>
				</div>
			</div>
			<div class="m-formfield-flyout__content">
				<p class="m-formfield-flyout__message">Er werden 54 resultaten gevonden. 5 Meest relevante resultaten:</p>
				<div class="m-formfield-flyout__content-container">
					<div class="m-option-list ">
						<ul class="m-option-list__items">
							<li class="m-option-list__item">
								<a class="m-option-list__link" href="#">
									<span class="m-option-list__text">Excel voor beginners</span>
									<span class="m-option-list__icon"></span>
								</a>
							</li>
							<li class="m-option-list__item">
								<a class="m-option-list__link" href="#">
									<span class="m-option-list__text">Excel - module 12: Charting</span>
									<span class="m-option-list__icon"></span>
								</a>
							</li>
							<li class="m-option-list__item">
								<a class="m-option-list__link" href="#">
									<span class="m-option-list__text">Transfiguration</span>
									<span class="m-option-list__icon"></span>
								</a>
							</li>
							<li class="m-option-list__item">
								<a class="m-option-list__link" href="#">
									<span class="m-option-list__text">Charms</span>
									<span class="m-option-list__icon"></span>
								</a>
							</li>
							<li class="m-option-list__item">
								<a class="m-option-list__link" href="#">
									<span class="m-option-list__text">Potions</span>
									<span class="m-option-list__icon"></span>
								</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="o-search__container l-container@below-viewport-9">
			<div class="o-search__fields l-grid l-grid--with-spacing l-grid--auto@viewport-9 u-margin-none@above-viewport-9">
				<div class="o-search__item l-grid__col l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="m-formfield-flyout js-formfield-flyout ">
						<div class="a-formfield  m-formfield-flyout__trigger a-formfield--straight-corners@above-viewport-9 ">
							<div class="a-formfield__header">
								<label class="a-formfield__label " for="">
									In de buurt van
								</label>
							</div>
							<div class="a-formfield__wrapper    ">
								<input class="a-formfield__input" type="" name="" id="" placeholder="vb. Brussel" value="" />
							</div>
						</div>
						<div class="m-formfield-flyout__content">
							<div class="m-formfield-flyout__content-container">
								<ul class="m-highlight-list ">
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										mechelen
									</li>
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										eik
									</li>
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										kantje
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col--6 l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="a-formfield  js-input-datepicker a-formfield--date a-formfield--straight-corners@above-viewport-9 ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="search-from">
								Vanaf
							</label>
						</div>
						<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
							<input class="a-formfield__input" type="date" name="search-from" id="search-from" placeholder="dd/mm/yyyy" value="" />
							<span class="a-formfield__icon-after icon-calendar"></span>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col--6 l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="a-formfield  js-input-datepicker a-formfield--date a-formfield--straight-corners@above-viewport-9 ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="search-to">
								Tot
							</label>
						</div>
						<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
							<input class="a-formfield__input" type="date" name="search-to" id="search-to" placeholder="dd/mm/yyyy" value="" />
							<span class="a-formfield__icon-after icon-calendar"></span>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="m-formfield-flyout js-formfield-flyout ">
						<div class="a-formfield  m-formfield-flyout__trigger a-formfield--straight-corners@above-viewport-9 ">
							<div class="a-formfield__header">
								<label class="a-formfield__label " for="">
									Ik zoek als *
								</label>
								<div class="a-formfield__tooltip">
									<div class="m-tooltip js-tooltip m-tooltip__trigger m-tooltip--top">
										<div class="m-tooltip__container">
											<span class="a-badge a-badge--theme-purple m-tooltip__icon">
												?
											</span>
											<div class="m-tooltip__flyout">
												<div class="m-tooltip__backdrop u-hide@above-viewport-9"></div>
												<div class="m-tooltip__content">
													<button class="a-icon-button a-icon-button--animated a-icon-button--inverted m-tooltip__close u-hide@above-viewport-9 ">
														<span class="a-icon-button__icon icon-cancel"></span>
													</button>
													<p class="m-tooltip__text">Om zoekresultaten relevant voor u te maken, bent u verplicht uw doelgroep te kiezen</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
								<input class="a-formfield__input" type="" name="" id="" placeholder="Maak een keuze" value="" readonly />
								<span class="a-formfield__icon-after icon-arrow-down"></span>
							</div>
						</div>
						<div class="m-formfield-flyout__content">
							<div class="m-formfield-flyout__content-container">
								<ul class="m-choice-list ">
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" checked type="radio" id="choice-list-default-1" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-1">
											Voor mezelf als bediende
										</label>
									</li>
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" type="radio" id="choice-list-default-2" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-2">
											Voor mezelf als werkzoekende
										</label>
									</li>
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" type="radio" id="choice-list-default-3" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-3">
											Als verantwoordelijke voor een collega
										</label>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<button type="submit" class="a-button o-search__submit u-width-100@below-viewport-9">
				<span class="a-button__icon icon-search"></span>
				<span class="a-button__text">Bekijk resultaten</span>
			</button>
		</div>
	</form>
</div>

With pills

px 

			
				<div class="o-search js-search ">
	<form class="o-search__form">
		<div class="m-formfield-flyout js-formfield-flyout o-search__suggest m-formfield-flyout--align-left undefined">
			<div class="a-formfield  m-formfield-flyout__trigger undefined ">
				<div class="a-formfield__header">
					<label class="a-formfield__label " for="">
						Zoekterm *
					</label>
				</div>
				<div class="a-formfield__wrapper a-formfield__wrapper--with-icon-before a-formfield__wrapper--with-icon-after  ">
					<span class="a-formfield__icon-before icon-search"></span>
					<input class="a-formfield__input" type="text" name="" id="" placeholder="Opleiding, themas, trefwoord of code zoeken" value="" />
					<span class="a-formfield__icon-after icon-cancel-circle"></span>
				</div>
			</div>
			<div class="m-formfield-flyout__content">
				<div class="m-formfield-flyout__content-container">
					<div class="a-loader ">
						<div class="a-loader__dots">
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
							<div class="a-loader__shape">
								<span class="a-loader__dot"></span>
							</div>
						</div>
						<p class="a-loader__feedback">Trefwoorden op basis van jouw zoekterm &#39;Excel&#39;</p>
					</div>
				</div>
			</div>
		</div>
		<div class="o-search__container l-container@below-viewport-9">
			<div class="o-search__fields l-grid l-grid--with-spacing l-grid--auto@viewport-9 u-margin-none@above-viewport-9">
				<div class="o-search__item l-grid__col l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="m-formfield-flyout js-formfield-flyout ">
						<div class="a-formfield  m-formfield-flyout__trigger a-formfield--straight-corners@above-viewport-9 ">
							<div class="a-formfield__header">
								<label class="a-formfield__label " for="">
									In de buurt van
								</label>
							</div>
							<div class="a-formfield__wrapper    ">
								<input class="a-formfield__input" type="" name="" id="" placeholder="vb. Brussel" value="" />
							</div>
						</div>
						<div class="m-formfield-flyout__content">
							<div class="m-formfield-flyout__content-container">
								<ul class="m-highlight-list ">
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										mechelen
									</li>
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										eik
									</li>
									<li class="m-highlight-list__item">
										<strong class="m-highlight-list__focus">Maas</strong>
										kantje
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col--6 l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="a-formfield  js-input-datepicker a-formfield--date a-formfield--straight-corners@above-viewport-9 ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="search-from">
								Vanaf
							</label>
						</div>
						<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
							<input class="a-formfield__input" type="date" name="search-from" id="search-from" placeholder="dd/mm/yyyy" value="" />
							<span class="a-formfield__icon-after icon-calendar"></span>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col--6 l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="a-formfield  js-input-datepicker a-formfield--date a-formfield--straight-corners@above-viewport-9 ">
						<div class="a-formfield__header">
							<label class="a-formfield__label " for="search-to">
								Tot
							</label>
						</div>
						<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
							<input class="a-formfield__input" type="date" name="search-to" id="search-to" placeholder="dd/mm/yyyy" value="" />
							<span class="a-formfield__icon-after icon-calendar"></span>
						</div>
					</div>
				</div>
				<div class="o-search__item l-grid__col l-grid__col--3@viewport-9 u-margin-none@above-viewport-9">
					<div class="m-formfield-flyout js-formfield-flyout ">
						<div class="a-formfield  m-formfield-flyout__trigger a-formfield--straight-corners@above-viewport-9 ">
							<div class="a-formfield__header">
								<label class="a-formfield__label " for="">
									Ik zoek als *
								</label>
								<div class="a-formfield__tooltip">
									<div class="m-tooltip js-tooltip m-tooltip__trigger m-tooltip--top">
										<div class="m-tooltip__container">
											<span class="a-badge a-badge--theme-purple m-tooltip__icon">
												?
											</span>
											<div class="m-tooltip__flyout">
												<div class="m-tooltip__backdrop u-hide@above-viewport-9"></div>
												<div class="m-tooltip__content">
													<button class="a-icon-button a-icon-button--animated a-icon-button--inverted m-tooltip__close u-hide@above-viewport-9 ">
														<span class="a-icon-button__icon icon-cancel"></span>
													</button>
													<p class="m-tooltip__text">Om zoekresultaten relevant voor u te maken, bent u verplicht uw doelgroep te kiezen</p>
												</div>
											</div>
										</div>
									</div>
								</div>
							</div>
							<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
								<input class="a-formfield__input" type="" name="" id="" placeholder="Maak een keuze" value="" readonly />
								<span class="a-formfield__icon-after icon-arrow-down"></span>
							</div>
						</div>
						<div class="m-formfield-flyout__content">
							<div class="m-formfield-flyout__content-container">
								<ul class="m-choice-list ">
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" checked type="radio" id="choice-list-default-1" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-1">
											Voor mezelf als bediende
										</label>
									</li>
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" type="radio" id="choice-list-default-2" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-2">
											Voor mezelf als werkzoekende
										</label>
									</li>
									<li class="m-choice-list__item">
										<input class="m-choice-list__input" type="radio" id="choice-list-default-3" name="choice-list-default" />
										<span class="m-choice-list__icon"></span>
										<label class="m-choice-list__label" for="choice-list-default-3">
											Als verantwoordelijke voor een collega
										</label>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
			<button type="submit" class="a-button o-search__submit u-width-100@below-viewport-9">
				<span class="a-button__icon icon-search"></span>
				<span class="a-button__text">Bekijk resultaten</span>
			</button>
		</div>
	</form>
	<ul class="m-pill-list o-search__pill-list">
		<li class="m-pill-list__item">
			<div class="a-pill ">
				<span class="a-pill__text">Excel (46)</span>
				<button class="a-pill__button"></button>
			</div>
		</li>
		<li class="m-pill-list__item">
			<div class="a-pill ">
				<span class="a-pill__text">Microsoft Office (54)</span>
				<button class="a-pill__button"></button>
			</div>
		</li>
		<li class="m-pill-list__item">
			<div class="a-pill ">
				<span class="a-pill__text">Administratie (18)</span>
				<button class="a-pill__button"></button>
			</div>
		</li>
		<li class="m-pill-list__item">
			<div class="a-pill ">
				<span class="a-pill__text">In de buurt van: Hasselt</span>
				<button class="a-pill__button"></button>
			</div>
		</li>
		<li class="m-pill-list__item">
			<div class="a-pill ">
				<span class="a-pill__text">Vanaf: 18/02/19</span>
				<button class="a-pill__button"></button>
			</div>
		</li>
		<li class="m-pill-list__item">
			<div class="a-pill ">
				<span class="a-pill__text">Tot: 19/08/19</span>
				<button class="a-pill__button"></button>
			</div>
		</li>
	</ul>
</div>