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 on background

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, ... .

The size of the label and border of the field change, depending on the state. Possible states are:

  • has-value
  • is-active
px 

			
				<div class="c-input js-input  ">
	<div class="c-input__wrapper">
		<input id="input-default-background-6" class="c-input__field" type="text" name="input-default-background-6" value="" />
		<label class="c-input__label " for="input-default-background-6">
			Text input
			<small class="c-input__info"></small>
		</label>
	</div>
</div>

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, ... .

The size of the label and border of the field change, depending on the state. Possible states are:

  • has-value
  • is-active
px 

			
				<div class="c-input js-input  ">
	<div class="c-input__wrapper">
		<input id="input-default-6" class="c-input__field" type="text" name="input-default-6" value="" />
		<label class="c-input__label " for="input-default-6">
			Text input
			<small class="c-input__info"></small>
		</label>
	</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 js-input  c-input--select ">
	<div class="c-input__wrapper">
		<select class="c-input__select" id="input-select-3" name="input-select-3" required>
			<option value="" hidden>-- select your option</option>
			<option value="">item 1</option>
			<option value="">item 2</option>
			<option value="">item 3</option>
		</select>
		<label class="c-input__label " for="input-select-3">
			Select field
			<small class="c-input__info"></small>
		</label>
	</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 js-input  c-input--textarea ">
	<div class="c-input__wrapper">
		<textarea class="c-input__textarea" cols="42" rows="5" name="input-textarea-3" id="input-textarea-3" placeholder=""></textarea>
		<label class="c-input__label " for="input-textarea-3">
			Textarea
			<small class="c-input__info"></small>
		</label>
	</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
px 

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

Documentation

Modifiers

  • c-input--no-border

    A variation of the input field that can be used on colored backgrounds

States

  • is-disabled

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

  • has-value

    Indicates that the input field, select box or textarea contains a value

  • is-active

    Indicates that the input field, select box or textarea is active

  • is-error

    Apply this modifier when the user has inserted a false value