Skip to content

Instantly share code, notes, and snippets.

@MatthewCallis
Created January 13, 2023 19:12
Show Gist options
  • Save MatthewCallis/5099e27ce287f605ff4e70499bbaddb7 to your computer and use it in GitHub Desktop.
Save MatthewCallis/5099e27ce287f605ff4e70499bbaddb7 to your computer and use it in GitHub Desktop.
Animated Form Labels
<div className="flex gap-3 justify-between">
<div className="animated-label w-full">
<fieldset>
<input
defaultValue={user?.FirstName}
id="first-name"
name="first-name"
type="text"
autoComplete="given-name"
className={`${inputStyles} ${hasError['first-name'] && 'border-red-500'}`}
required
aria-required="true"
/>
<label htmlFor="first-name">First Name</label>
</fieldset>
</div>
<div className="animated-label w-full">
<fieldset>
<input
defaultValue={user?.LastName}
id="last-name"
name="last-name"
type="text"
autoComplete="family-name"
className={`${inputStyles} ${hasError['last-name'] && 'border-red-500'}`}
required
aria-required="true"
/>
<label htmlFor="last-name">Last Name</label>
</fieldset>
</div>
</div>
/* Animated Form Labels */
.animated-label fieldset {
position: relative;
}
.animated-label label {
position: absolute;
top: 13px;
left: 12px;
color: #ADABAB;
font-size: 19px;
transform: translate3d(0, 0, 0);
transition: all 0.1s ease-in-out;
}
.animated-label input {
font-size: 19px;
transition: all 0.2s ease-in-out;
padding: 22px 0.75rem 10px;
}
.animated-label input:valid,
.animated-label input:focus {
padding: 22px 0.75rem 10px;
}
.animated-label input:focus {
outline: 0;
}
.animated-label input:valid + label,
.animated-label input:focus + label {
color: #1E1D24;
font-size: 13px;
transform: translate3d(0, -10px, 0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment