Input

Input elements should always be used within a

. These can vary by type, for example: "Text", "Password", "E-mail", ... Some input elements require some additional attributes like the type "Amount", which requires a min, max and step attribute.

If the user focuses on one input field, the label animates from the center of the input field to the top, making room for the user to typ. When the users focuses on a different input or leaves the input as it is, if a value was given, the label stays on top of the input field. If there was no value, the label goes back to the center and functions as some sort of palceholder.

Amount

px 

			
				<div class="a-input ">
	<div class="a-input__container">
		<input class="a-input__field" type="number" id="styleguide-amount-example" name="styleguide-amount-example" placeholder=" " value="" min="0" max="10" step="1" />
		<label for="styleguide-amount-example" class="a-input__label">Amount input
		</label>
	</div>
</div>

Datepicker

px 

			
				<div class="a-input a-input--datepicker js-a-datepicker " data-is-range="true">
	<div class="a-input__container">
		<input class="a-input__field a-input__datepicker" type="text" placeholder=" " value="">
		<label for="" class="a-input__label">Kies een datum
		</label>
	</div>
</div>

Default with pretext

px 

			
				<div class="a-input ">
	<div class="a-input__container">
		<input class="a-input__field" type="text" id="styleguide-text-example" name="styleguide-text-example" placeholder=" " value="" />
		<label for="styleguide-text-example" class="a-input__label"><span class="a-input__pretext">L</span> Text input
		</label>
	</div>
</div>

Default

px 

			
				<div class="a-input ">
	<div class="a-input__container">
		<input class="a-input__field" type="text" id="styleguide-text-example" name="styleguide-text-example" placeholder=" " value="" />
		<label for="styleguide-text-example" class="a-input__label">Text input
		</label>
	</div>
</div>

Email

px 

			
				<div class="a-input ">
	<div class="a-input__container">
		<input class="a-input__field" type="email" id="styleguide-email-example" name="styleguide-email-example" placeholder=" " value="" />
		<label for="styleguide-email-example" class="a-input__label">E-mail input
		</label>
	</div>
</div>

File

px 

			
				<div class="a-input a-input--file ">
	<div class="a-input__container">
		<input class="a-input__field js-a-fileupload" type="file" id="file_upload" name="file_upload" placeholder=" " value="" />
		<label for="file_upload" class="a-input__label"><span class="icon-download"></span><span class="js-a-fileupload-value">File upload</span></label>
	</div>
</div>
<div class="a-input a-input--file l-grid__col-12-12">
	<div class="a-input__container">
		<input class="a-input__field js-a-fileupload" name="vacature" type="file">
		<label for="vacature" class="a-input__label"><span class="icon-download"></span><span class="js-a-fileupload-value">Motivation</span></label>
	</div>
</div>

Newsletter

px 

			
				<div class="a-input a-input--newsletter js-a-input-newsletter ">
	<div class="a-input__container">
		<input class="a-input__field" type="text" id="styleguide-newsletter-example1" name="styleguide-newsletter-example1" placeholder=" " value="" />
		<label for="styleguide-newsletter-example1" class="a-input__label">Newsletter input</label>
	</div>
	<button class="a-button a-button a-button--inverted a-input__button js-a-input__button ">
		<span class="a-button__text">Verstuur</span>
		<span class="a-button__icon a-button__icon--after icon-send"></span>
	</button>
	<div class="a-input__checkmark">
		<svg width="20px" height="20px" viewBox="0 0 16 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
			<polyline id="Path-2" stroke="#ffffff" stroke-width="2" fill="none" fill-rule="evenodd" points="15 1.18222222 5.12326754 10.6663368 1 6.66644098"></polyline>
		</svg>
	</div>
</div>

Password

px 

			
				<div class="a-input ">
	<div class="a-input__container">
		<input class="a-input__field" type="password" id="styleguide-password-example" name="styleguide-password-example" placeholder=" " value="" />
		<label for="styleguide-password-example" class="a-input__label">Password input
		</label>
	</div>
</div>

Search

px 

			
				<div class="a-input a-input--search ">
	<div class="a-input__container">
		<input class="a-input__field" type="text" id="styleguide-search-example1" name="styleguide-search-example1" placeholder=" " value="" />
		<label for="styleguide-search-example1" class="a-input__label">Search input</label>
	</div>
	<button class="a-button a-button--inverted a-input__button">
		<span class="a-button__icon a-button__icon--before icon-search"></span>
		<span class="a-button__text">Zoek</span>
	</button>
</div>

Select

px 

			
				<div class="a-input a-input--select ">
	<div class="a-input__container">
		<select class="a-input__field">
			<option class="a-input--select__placeholder" selected disabled>Selecteer een item</option>
			<option value="option1">option1</option>
			<option value="option2">option2</option>
			<option value="option3">option3</option>
		</select>
		<label for="styleguide-select" class="a-input__label">Select input
		</label>
	</div>
</div>

Telefone

px 

			
				<div class="a-input ">
	<div class="a-input__container">
		<input class="a-input__field" type="tel" id="styleguide-telephone-example" name="styleguide-telephone-example" placeholder=" " value="" />
		<label for="styleguide-telephone-example" class="a-input__label">Telephone input
		</label>
	</div>
</div>

Textarea

px 

			
				<div class="a-input a-input--textarea ">
	<div class="a-input__container">
		<textarea class="a-input__field" col="5" rows="5" placeholder=" " name="styleguide-textarea-example"></textarea>
		<label for="styleguide-textarea-example" class="a-input__label">textarea input
		</label>
	</div>
</div>

Url

px 

			
				<div class="a-input ">
	<div class="a-input__container">
		<input class="a-input__field" type="url" id="styleguide-url-example" name="styleguide-url-example" placeholder=" " value="" />
		<label for="styleguide-url-example" class="a-input__label">Url input
		</label>
	</div>
</div>

Documentation

Modifiers

  • a-input--inverted

    This class will give the background a light transparent white background, a white border and put the text to white.

  • a-input--light

    This class will give a the background a solid white color.

  • a-input--select

    Will put an arrow at the right end of the input field.

  • a-input--textarea

    Using this class on a textarea is necessairy to give the label the right position.

  • a-input--datepicker

    Will put a calendar icon at the right end of the input field.

  • a-input--newsletter

    Necessairy to style the newsletter input with the included subscribe button.

  • a-input--search

    Will provide the styling for this input field and the button.

States

  • is-error

    This will provide a red border and put the feedback in red

  • is-subscribed

    This is only useful on the newsletter input fields.