Input grid

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-grid ">
	<label class="c-input-grid__label " for="atoms-input-grid">
		Input grid
		<small class="c-input-grid__info"></small>
	</label>
	<div class="c-input-grid__wrapper">
		<div class="l-grid l-grid--with-spacing">
			<div class="c-input  l-grid__col l-grid__col--6">
				<div class="c-input__wrapper
			">
					<input id="atoms-input-grid" class="c-input__field " type="text" name="" placeholder="placeholder" value="" />
				</div>
			</div>
			<div class="c-input  l-grid__col l-grid__col--6">
				<div class="c-input__wrapper
			">
					<input id="atoms-input-grid" class="c-input__field " type="text" name="" placeholder="placeholder" value="" />
				</div>
			</div>
			<div class="c-input  l-grid__col l-grid__col--3">
				<div class="c-input__wrapper
			">
					<input id="atoms-input-grid" class="c-input__field " type="text" name="" placeholder="placeholder" value="" />
				</div>
			</div>
			<div class="c-input  c-input--select l-grid__col l-grid__col--9">
				<div class="c-input__wrapper
			">
					<select class="c-input__select" id="atoms-input-grid" name="">
						<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>
		</div>
	</div>
</div>

With feedback 


			
				<div class="c-input-grid is-error">
	<label class="c-input-grid__label " for="atoms-input-grid-info">
		Input grid
		<small class="c-input-grid__info"></small>
	</label>
	<div class="c-input-grid__wrapper">
		<div class="l-grid l-grid--with-spacing">
			<div class="c-input  is-error l-grid__col l-grid__col--2">
				<div class="c-input__wrapper
			">
					<input id="atoms-input-grid-info" class="c-input__field " type="text" name="" placeholder="placeholder" value="" />
				</div>
			</div>
			<div class="c-input  is-error l-grid__col l-grid__col--5">
				<div class="c-input__wrapper
			">
					<input id="atoms-input-grid-info" class="c-input__field " type="text" name="" placeholder="placeholder" value="" />
				</div>
			</div>
			<div class="c-input  is-error l-grid__col l-grid__col--5">
				<div class="c-input__wrapper
			">
					<input id="atoms-input-grid-info" class="c-input__field " type="text" name="" placeholder="placeholder" value="" />
				</div>
			</div>
			<div class="c-input  is-error l-grid__col l-grid__col--3">
				<div class="c-input__wrapper
			">
					<input id="atoms-input-grid-info" class="c-input__field " type="text" name="" placeholder="placeholder" value="" />
				</div>
			</div>
			<div class="c-input  c-input--select is-error l-grid__col l-grid__col--9">
				<div class="c-input__wrapper
			">
					<select class="c-input__select" id="atoms-input-grid-info" name="">
						<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>
		</div>
	</div>
	<div class="c-input-grid__feedback ">
		<p class="c-input-grid__feedback-text">This is error feedback about the input field</p>
	</div>
</div>

With info

This is info about the input field


			
				<div class="c-input-grid ">
	<label class="c-input-grid__label " for="atoms-input-grid-info">
		Input grid with info
		<small class="c-input-grid__info"></small>
	</label>
	<div class="c-input-grid__wrapper">
		<div class="l-grid l-grid--with-spacing">
			<div class="c-input  l-grid__col l-grid__col--6">
				<div class="c-input__wrapper
			">
					<input id="atoms-input-grid-info" class="c-input__field " type="text" name="" placeholder="placeholder" value="" />
				</div>
			</div>
			<div class="c-input  l-grid__col l-grid__col--6">
				<div class="c-input__wrapper
			">
					<input id="atoms-input-grid-info" class="c-input__field " type="text" name="" placeholder="placeholder" value="" />
				</div>
			</div>
			<div class="c-input  l-grid__col l-grid__col--3">
				<div class="c-input__wrapper
			">
					<input id="atoms-input-grid-info" class="c-input__field " type="text" name="" placeholder="placeholder" value="" />
				</div>
			</div>
			<div class="c-input  c-input--select l-grid__col l-grid__col--9">
				<div class="c-input__wrapper
			">
					<select class="c-input__select" id="atoms-input-grid-info" name="">
						<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>
			<div class="c-input  c-input--textarea l-grid__col">
				<div class="c-input__wrapper
			">
					<textarea class="c-input__textarea" cols="42" rows="5" name="" id="atoms-input-grid-info" placeholder="placeholder"></textarea>
				</div>
			</div>
		</div>
	</div>
	<div class="c-input-grid__info ">
		<p class="c-input-grid__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