Cevora

Component consists out of input fields with their corresponding type. Each input field can be supported by an icon or any sort of feedback needed to guide the user through a form. These input fields contain states to indicate towards the user if he has filled in the correct value.

Modifiers
Javascript

As datepicker

The datepicker is based off the default formfield styling. But it should make use of a library in order to generate the months and dates correctly.


			
				<div class="a-formfield  js-input-datepicker ">
	<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
		<input class="a-formfield__input" type="text" name="datepicker-example-1" id="datepicker-example-1" placeholder="dd/mm/yyyy" value="" />
		<span class="a-formfield__icon-after icon-calendar"></span>
	</div>
</div>

Default


			
				<div class="a-formfield   ">
	<div class="a-formfield__header">
		<label class="a-formfield__label " for="formfield-with-label-example-4">
			Example label
		</label>
	</div>
	<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
		<input class="a-formfield__input" type="text" name="formfield-with-label-example-4" id="" placeholder="A placeholder" value="A value" />
		<span class="a-formfield__icon-after icon-search"></span>
	</div>
</div>

Secondary


			
				<div class="a-formfield  a-formfield--secondary ">
	<div class="a-formfield__header">
		<label class="a-formfield__label " for="formfield-with-label-example-4">
			Example label
		</label>
	</div>
	<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
		<input class="a-formfield__input" type="text" name="formfield-with-label-example-4" id="" placeholder="A placeholder" value="A value" />
		<span class="a-formfield__icon-after icon-search"></span>
	</div>
</div>

Select

The select formfield is used to display a set of options from which the user can choose. It has similar styling as a default formfield, but makes use of the <select> HTML Markup.


			
				<div class="a-formfield ">
	<div class="a-formfield__header">
		<label class="a-formfield__label " for="">
			Select
		</label>
	</div>
	<div class="a-formfield__wrapper a-formfield__wrapper--with-icon-after ">
		<select class="a-formfield__select" id="" name="">
			<option value="" selected disabled>A placeholder</option>
			<option value="">option 1</option>
			<option value="">option 2</option>
			<option value="">option 3</option>
		</select>
		<span class="a-formfield__icon-after icon-arrow-down-small"></span>
	</div>
</div>

Textarea

A textarea makes use of the same styling as a default formfield. It contains a resize element, but can only be resized vertically. If the content exceeds the default height the element gains a scrollbar.

A textarea also has the possibility of having a character limit. If the character limit reaches a certain point the text will update itself with a state for visual feedback towards the user. This can either be is-error or is-warning onto the countdown element.


			
				<div class="a-formfield a-formfield--textarea ">
	<div class="a-formfield__header">
		<label class="a-formfield__label " for="textarea-default-example-2">
			An example label
		</label>
	</div>
	<div class="a-formfield__wrapper ">
		<textarea class="a-formfield__textarea" cols="42" rows="5" name="textarea-default-example-2" id="" placeholder="A placeholder">Aenean lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui.</textarea>
	</div>
	<small class="a-formfield__countdown is-error">-10 Characters over the limit</small>
</div>

With button

Use this type of button when there should be a submit button inside the input field. This is usually done when there is only one input field in the form. For example: a subscription form.


			
				<div class="a-formfield   ">
	<div class="a-formfield__header">
		<label class="a-formfield__label " for="formfield-with-label-example-4">
			Example label
		</label>
	</div>
	<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after a-formfield__wrapper--with-button ">
		<input class="a-formfield__input" type="text" name="formfield-with-label-example-4" id="" placeholder="A placeholder" value="A value" />
		<span class="a-formfield__icon-after icon-search"></span>
		<div class="a-formfield__button">
			<input type="submit" class="a-button " value="Schrijf je in" />
		</div>
	</div>
</div>

With states

These represent the different possible states a field can have. To improve the UX we add more context through a message that explains the state better.


			
				<div class="a-formfield  is-error ">
	<div class="a-formfield__header">
		<label class="a-formfield__label " for="formfield-with-state-example-1">
			Example label
		</label>
	</div>
	<div class="a-formfield__wrapper    ">
		<input class="a-formfield__input" type="email" name="formfield-with-state-example-1" id="" placeholder="A placeholder" value="" />
	</div>
	<div class="a-formfield__feedback ">
		<p class="a-formfield__message"></p>
	</div>
</div>

With tooltip


			
				<div class="a-formfield   ">
	<div class="a-formfield__header">
		<label class="a-formfield__label " for="formfield-with-label-example-4">
			Example label
		</label>
	</div>
	<div class="a-formfield__wrapper  a-formfield__wrapper--with-icon-after  ">
		<input class="a-formfield__input" type="text" name="formfield-with-label-example-4" id="" placeholder="A placeholder" value="A value" />
		<span class="a-formfield__icon-after icon-search"></span>
	</div>
</div>

Documentation

Modifiers

a-formfield__wrapper--with-icon-before

Add this class to the wrapper child element to add an icon to the wrapper component. This icon will be displayed on the left side of the input field.
a-formfield__wrapper--with-icon-after

Add this class to the wrapper child element to add an icon to the wrapper component. This icon will be displayed on the right side of the input field.
a-formfield__wrapper--with-button

Add this class to the wrapper child element to indicate that there is a button present within the input field. The button will be displayed on the right side of the input field. This cannot be combined with a-formfield__wrapper--with-icon.
a-formfield--textarea

Class that indicates that the formfield is a textarea element instead of a normal input field.
a-formfield__horizontal

Position the label next to the input field instead of by default above it
a-formfield--straight-corners

Removes the rounded corners of the input field
a-formfield--secondary

Changes the border radius of all field types

JavaScript

js-formfield

Indicate that the formfield has JavaScript functionality. This is mainly used when the formfield has a flyout. Remove this class when no JavaScript defined in the brandplatform should be used.