Input field

Field label

HTML

    
<div class="form__field input-field input-field--text">
  <label>Field label
    <input id="input-field" name="input-field" type="text" placeholder=""   />
  </label>
</div>

SCSS

    .input-field {
	position: relative;
	margin-bottom: 28px;
	&.input-field--short {
		input {
			width: 150px;
		}
	}
	label {
		@include small-font;
	}
	input {
		@include small-font;
		display: block;
		width: 100%;
		height: 40px;
		margin-top: 8px;
		border: 1px solid $border-color;
		padding: 0 10px;
		box-shadow: inset 0 3px 0 0 $grey-L66;
		&::placeholder {
			color: $grey-L20;
			opacity: 1;
		}
		&:hover {
			border-color: $border-hover-color;
		}
		&:focus,
		&:active {
			border-color: $coral;
		}
	}
	&.hover input {
		border-color: $border-hover-color;
	}
	&.focus input {
		border-color: $coral;
	}
	&.error input,
	& input.error {
		border: 3px solid $ruby;
	}
}

Connect Dementia Research

Pattern Library

Input field

HTML

SCSS