Input

A component that lets the user insert content and sent it to an external source. This component is usually placed within a <form>. It contains a button with icon to further help the user insert content.

Information can be provided to the user in the form of text to make sure the user gets the input correct. If the input is not correct feedback is provided on how to fix this or how to make sure the content is correct.

Default

px

			
				<div class="c-input  ">
	<input id="input-default-1" class="c-input__field" type="email" name="input-default-1" placeholder="Vul je e-mailadres in" />
	<div class="c-input__button">
		<button class="c-icon-button ">
			<div class="c-icon c-icon-button__icon">
				<?xml version="1.0" encoding="utf-8"?>
				<!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
				<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
					<style type="text/css">
						.st0 {
							fill-rule: evenodd;
							clip-rule: evenodd;
						}
					</style>
					<path class="st0" d="M0,9.8v4h16.6l-5.8,5.8l2.8,2.8L24,12L13.6,1.6l-2.8,2.8l5.4,5.4H0z" />
				</svg>
			</div>
			<span class="u-visually-hidden">arrow-right</span>
		</button>
	</div>
</div>
<div class="c-input  ">
	<input id="input-default-2" class="c-input__field" type="text" name="input-default-2" placeholder="Zoek op werken, kunstenaars en stromingen" />
	<div class="c-input__button">
		<button class="c-icon-button ">
			<div class="c-icon c-icon-button__icon">
				<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5269 10.2635C18.5269 14.8272 14.8272 18.5269 10.2635 18.5269C5.69967 18.5269 2 14.8272 2 10.2635C2 5.69967 5.69967 2 10.2635 2C14.8272 2 18.5269 5.69967 18.5269 10.2635ZM16.7794 18.1936C15.0071 19.6515 12.7375 20.5269 10.2635 20.5269C4.5951 20.5269 0 15.9318 0 10.2635C0 4.5951 4.5951 0 10.2635 0C15.9318 0 20.5269 4.5951 20.5269 10.2635C20.5269 12.7375 19.6515 15.0071 18.1936 16.7794L23.7999 22.3857L22.3857 23.7999L16.7794 18.1936Z" />
				</svg>
			</div>
			<span class="u-visually-hidden">search</span>
		</button>
	</div>
</div>
<div class="c-input  c-input--secondary">
	<input id="input-default-2" class="c-input__field" type="text" name="input-default-2" placeholder="Zoek op werken, kunstenaars en stromingen" />
	<div class="c-input__button">
		<button class="c-icon-button ">
			<div class="c-icon c-icon-button__icon">
				<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M18.5269 10.2635C18.5269 14.8272 14.8272 18.5269 10.2635 18.5269C5.69967 18.5269 2 14.8272 2 10.2635C2 5.69967 5.69967 2 10.2635 2C14.8272 2 18.5269 5.69967 18.5269 10.2635ZM16.7794 18.1936C15.0071 19.6515 12.7375 20.5269 10.2635 20.5269C4.5951 20.5269 0 15.9318 0 10.2635C0 4.5951 4.5951 0 10.2635 0C15.9318 0 20.5269 4.5951 20.5269 10.2635C20.5269 12.7375 19.6515 15.0071 18.1936 16.7794L23.7999 22.3857L22.3857 23.7999L16.7794 18.1936Z" />
				</svg>
			</div>
			<span class="u-visually-hidden">search</span>
		</button>
	</div>
</div>
			

		

Documentation

Modifiers

  • c-input--secondary

    Changes the border-color and the placeholder text color to blue

States

  • is-disabled

    Indicate that the input field, select box or textarea is disabled