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 is represented by a label and can contain an icon or button to further help the user insert content.

Information can be provided to the user in the form of text or a tooltip 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

An input field is by default a field where the user has to insert something. The functionality of an input field is based on the given type: text, email, password, number, tel, ... .

px 

			
				<div class="c-input  ">
	<label class="c-input__label " for="components-input-default-6">Text input</label>
	<div class="c-input__wrapper
			">
		<input id="components-input-default-6" class="c-input__field" type="text" name="components-input-default-6" placeholder="placeholder" value="" />
	</div>
</div>

Select

An input can also be a select field, providing the user with different options to select from.

px 

			
				<div class="c-input  c-input--select ">
	<label class="c-input__label " for="components-input-select-3">Select field</label>
	<div class="c-input__wrapper
			">
		<select class="c-input__select" id="components-input-select-3" name="components-input-select-3">
			<option selected disabled>placeholder</option>
		</select>
		<span class="c-input__icon "></span>
	</div>
</div>

Textarea

A textarea can be considered quit similar to a default input, but it is resizable and lets the user insert multiple rows of content in comparison to a default input field, which only allows one line.

px 

			
				<div class="c-input  c-input--textarea ">
	<label class="c-input__label " for="components-input-textarea-3">Textarea</label>
	<div class="c-input__wrapper
			">
		<textarea class="c-input__textarea" cols="42" rows="5" name="components-input-textarea-3" id="components-input-textarea-3" placeholder="placeholder">
		</textarea>
	</div>
</div>

With button

The input field can be supported by a button, indicating an action. This is usually applied when there is just one input field present within the form. For example: a subscription form which only requires an e-mail field.

px 

			
				<div class="c-input  ">
	<label class="c-input__label " for="components-input-with-button-3">Text input with button</label>
	<div class="c-input__wrapper
			c-input__wrapper--with-button">
		<input id="components-input-with-button-3" class="c-input__field" type="text" name="components-input-with-button-3" placeholder="placeholder" value="" />
		<div class="c-input__button">
			<button class="c-button  ">
				<span class="c-button__text">button</span>
			</button>
		</div>
	</div>
</div>

With feedback

It is always important to provide feedback to the user. When the user has inserted content, we validate it. This validation can be false or correct. This feedback can be shown through the use of these states:

  • is-error
  • is-warning
  • is-succes
px 

			
				<div class="c-input  is-error">
	<label class="c-input__label " for="components-input-with-feedback-4">Text input with info</label>
	<div class="c-input__wrapper
			">
		<input id="components-input-with-feedback-4" class="c-input__field" type="text" name="components-input-with-feedback-4" placeholder="placeholder" value="" />
	</div>
	<div class="c-input__feedback ">
		<p class="c-input__feedback-text">This is error feedback about the input field</p>
	</div>
</div>

With icon

An input field can be supported by an icon, which helps identify the inserted content. For example: a calender to indicate a date picker.

px 

			
				<div class="c-input  ">
	<label class="c-input__label " for="components-input-with-icon-3">Text input with icon</label>
	<div class="c-input__wrapper
			c-input__wrapper--with-icon
			">
		<input id="components-input-with-icon-3" class="c-input__field" type="text" name="components-input-with-icon-3" placeholder="placeholder" value="" />
		<span class="c-input__icon icon-arrow-down"></span>
	</div>
</div>

With info

Sometimes it is difficult for the user to understand what value has to be inserted when looking at just the label. In order to help the user we can provide a small bit of information to help him further understand what we expect to be inserted. IMPORTANT TO NOTE is to keep this as short as possible.

px 

			
				<div class="c-input  ">
	<label class="c-input__label " for="components-input-with-info-4">Text input with info</label>
	<div class="c-input__wrapper
			">
		<input id="components-input-with-info-4" class="c-input__field" type="text" name="components-input-with-info-4" placeholder="placeholder" value="" />
	</div>
	<div class="c-input__info ">
		<p class="c-input__info-text">This is info about the input field</p>
	</div>
</div>

Documentation

Modifiers

Root

  • c-input--select

    Use this modifier when the input field is a select box with options to apply the correct styling

  • c-input--textarea

    Use this modifier when the input field is a textarea to apply the correct styling

Wrapper

  • c-input__wrapper--with-icon

    Indicate that there is an icon present on the input field

  • c-input__wrapper--with-button

    Indicate that there is a button present next to the input field

States

  • is-disabled

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

  • is-error

    Apply this modifier when the user has inserted a false value

  • is-warning

    Apply this modifier when the user has inserted a value that is neither wrong or right, but should be adjusted

  • is-succes

    Apply this modifier when the user has inserted a value that is correct and you want to congratulate the user on his accomplishment