By Espina Studio
Suscribe to our newsletter & get early
access to new content.
Inputs
Overview
Inputs are an element that can take data. There are a lot of types of inputs for different use cases. We usually use them in forms, filters, search bars or anywhere where we need the end user to give information.
Ingresa un nombre.
<div class="input-group">
<input class="form-input form-input-border-gray" id="usuario-nombre" type="text" name="nombre" placeholder="Nombre" required />
<div class="invalid-feedback">
Ingresa un nombre.
</div>
</div>
.input-group {
position: relative;
margin-bottom: 20px;
flex-wrap: initial;
.form-control {
padding-top: 2.5rem;
&.active,
&:focus,
&:valid {
& + .form-control-label {
font-size: 1.1rem;
line-height: 1.6rem;
letter-spacing: 0;
top: 0;
}
}
}
}
Selecciona un tipo de brief
<div class="input-group">
<div class="select-input">
<select>
<option disabled selected>Selecciona un tipo de brief</option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
<div class="invalid-feedback">
Selecciona un tipo de brief
</div>
</div>
</div>.select-input {
width: 100%;
select {
appearance: none;
padding: 11px 15px;
border: 1px solid $gray-700;
border-radius: 4px;
width: 100%;
&::placeholder {
color: $black;
}
}
&::after {
content: "";
position: absolute;
top: 50%;
right: 10px;
width: 10px;
height: 5px;
background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.98242 2.44131L5.48364 6.94009L0.982422 2.44131' stroke='black' s
stroke-miterlimit='10'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
}<form action="" class="body-text-componentes">
<div class="input-group flex-wrap flex-md-nowrap">
<input type="text" class="form-input form-input-border-gray mr-md-30 mb-20 mb-md-0" placeholder="Nombre" name="nombre">
<input type="text" class="form-input form-input-border-gray" placeholder="Apellido" name="apellido">
</div>
<div class="input-group">
<input type="email" class="form-input form-input-border-gray" name="email" placeholder="E-mail">
</div>
<div class="input-group">
<div class="select-input">
<select>
<option disabled selected>Tipo de programa</option>
<option>option 1</option>
<option>option 2</option>
<option>option 3</option>
</select>
<div class="invalid-feedback">
Selecciona un tipo de programa
</div>
</div>
</div>
<div class="input-group">
<input type="text" class="form-input form-input-border-gray" name="asunto" placeholder="Asunto">
</div>
<div class="input-group">
<textarea class="form-input form-input-border-gray" name="mensaje" rows="5" placeholder="Mensaje"></textarea>
</div>
<button type="submit" class="btn btn-gold btn-squared btn-padding btn-large">
Enviar mensaje
</button>
</form>.form-control {
color: $black;
background: transparent;
border: 0;
border-bottom: 0.1rem solid $black;
border-radius: 0;
width: 100%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
&:focus {
outline: 0;
}
&::placeholder {
color: $black;
}
&:-webkit-autofill,
&:-webkit-autofill:active,
&:-webkit-autofill:focus,
&:-webkit-autofill:hover {
transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}
}
.was-validated {
input,
textarea {
&:invalid ~ .invalid-feedback {
display: block;
}
}
}
.invalid-feedback {
display: none;
width: 100%;
margin-top: 0.5rem;
font-size: 1.4rem;
line-height: 2rem;
letter-spacing: 0.03rem;
font-weight: normal;
color: red;
}
.input-group-inline {
display: flex;
border-bottom: 0.1rem solid $black;
margin-bottom: 2rem;
input,
button {
background: transparent;
border: 0;
}
input {
color: $black;
padding: 0;
&::placeholder {
color: $black;
}
}
}
Inputs generally are used inside a form.
They need to have a type and name defined.
Variant
Purpose
Basic
The most common type of input. We use it for names, emails, passwords, etc.
Select
Used when we need the user to choose between defined options.
Textarea
Used mostly for messages or text bigger than 100 characters.
Copied to clipboard