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


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

Multiple select

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


			
				<div class="c-input  c-input--multiple-select ">
	<label class="c-input__label " for="multiple-select-1">
		Select field
		<small class="c-input__info"></small>
	</label>
	<div class="c-input__wrapper
			">
		<div class="c-input__multiple-select" id="multiple-select-1">
			<div class="c-checkbox c-checkbox--reverse">
				<label class="c-checkbox__container">
					<div class="c-checkbox__checkbox-wrapper">
						<input class="c-checkbox__input" type="checkbox" name="checkbox-button" value="item 1" />
						<span class="c-checkbox__holder">
							<div class="c-icon c-icon--white c-checkbox__icon">
								<?xml version="1.0" encoding="utf-8"?>
								<!-- Generator: Adobe Illustrator 22.1.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">
									<polygon points="9.1,20.8 0,14.3 1.7,11.9 8.7,16.9 21.9,3.2 24,5.2 " />
								</svg>
							</div>
						</span>
					</div>
					<p class="c-checkbox__label">item 1</p>
				</label>
			</div>
			<div class="c-checkbox c-checkbox--reverse">
				<label class="c-checkbox__container">
					<div class="c-checkbox__checkbox-wrapper">
						<input class="c-checkbox__input" type="checkbox" name="checkbox-button" value="item 2" />
						<span class="c-checkbox__holder">
							<div class="c-icon c-icon--white c-checkbox__icon">
								<?xml version="1.0" encoding="utf-8"?>
								<!-- Generator: Adobe Illustrator 22.1.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">
									<polygon points="9.1,20.8 0,14.3 1.7,11.9 8.7,16.9 21.9,3.2 24,5.2 " />
								</svg>
							</div>
						</span>
					</div>
					<p class="c-checkbox__label">item 2</p>
				</label>
			</div>
			<div class="c-checkbox c-checkbox--reverse">
				<label class="c-checkbox__container">
					<div class="c-checkbox__checkbox-wrapper">
						<input class="c-checkbox__input" type="checkbox" name="checkbox-button" value="item 3" />
						<span class="c-checkbox__holder">
							<div class="c-icon c-icon--white c-checkbox__icon">
								<?xml version="1.0" encoding="utf-8"?>
								<!-- Generator: Adobe Illustrator 22.1.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">
									<polygon points="9.1,20.8 0,14.3 1.7,11.9 8.7,16.9 21.9,3.2 24,5.2 " />
								</svg>
							</div>
						</span>
					</div>
					<p class="c-checkbox__label">item 3</p>
				</label>
			</div>
		</div>
	</div>
</div>

Select

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


			
				<div class="c-input  c-input--select ">
	<label class="c-input__label " for="atoms-input-select-3">
		Select field
		<small class="c-input__info"></small>
	</label>
	<div class="c-input__wrapper
			">
		<select class="c-input__select" id="atoms-input-select-3" name="atoms-input-select-3">
			<option class="c-input__select-option" selected disabled>
				placeholder
			</option>
			<option class="c-input__select-option" value="">
				item 1
			</option>
			<option class="c-input__select-option" value="">
				item 2
			</option>
			<option class="c-input__select-option" value="">
				item 3
			</option>
		</select>
		<div class="c-icon c-input__icon">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<path d="M0,7.9l3-3l9,9l9-9l3,3L13.5,18.4c-0.4,0.4-0.9,0.6-1.5,0.6c-0.6,0-1.1-0.2-1.5-0.6L0,7.9z" />
			</svg>
		</div>
	</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.


			
				<div class="c-input  c-input--textarea ">
	<label class="c-input__label " for="atoms-input-textarea-3">
		Textarea
		<small class="c-input__info"></small>
	</label>
	<div class="c-input__wrapper
			">
		<textarea class="c-input__textarea" cols="42" rows="5" name="atoms-input-textarea-3" id="atoms-input-textarea-3" placeholder="placeholder"></textarea>
	</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

			
				<div class="c-input  is-error">
	<label class="c-input__label " for="atoms-input-with-feedback-4">
		Text input with info
		<small class="c-input__info"></small>
	</label>
	<div class="c-input__wrapper
			">
		<input id="atoms-input-with-feedback-4" class="c-input__field " type="text" name="atoms-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.


			
				<div class="c-input  ">
	<label class="c-input__label " for="atoms-input-with-icon-3">
		Text input with icon
		<small class="c-input__info"></small>
	</label>
	<div class="c-input__wrapper
			">
		<input id="atoms-input-with-icon-3" class="c-input__field  c-input__field--with-icon " type="text" name="atoms-input-with-icon-3" placeholder="placeholder" value="" />
		<div class="c-icon c-input__icon">
			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
				<path d="M0,7.9l3-3l9,9l9-9l3,3L13.5,18.4c-0.4,0.4-0.9,0.6-1.5,0.6c-0.6,0-1.1-0.2-1.5-0.6L0,7.9z" />
			</svg>
		</div>
	</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.

This is info about the input field

This is info about the select field

This is info about the select field


			
				<div class="c-input  ">
	<label class="c-input__label " for="atoms-input-with-info-4">
		Text input with info
		<small class="c-input__info"></small>
	</label>
	<div class="c-input__wrapper
			">
		<input id="atoms-input-with-info-4" class="c-input__field " type="text" name="atoms-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

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