Neobrutalist React Form with Floating Labels

index.html

<div id="app"></div>

neobrutalist-react-form-with-floating-labels.markdown

Neobrutalist React Form with Floating Labels

A form using floating labels as placeholder text until text is entered.

A Pen by Carson Ford on CodePen.

License.

script.babel

import React, { useState } from 'https://esm.sh/react@18.2.0';
import ReactDOM from 'https://esm.sh/react-dom@18.2.0';

// FieldGroup Component
const FieldGroup = (props) => {
	const {label} = props;
	const [isRaised, setIsRaised] = useState(false);
	
 	return (
		<div className="form__field-group">
			<label className={`form__label ${isRaised && 'form__label--raised'}`}>{label}</label>
			<input
				className="form__input"
				onFocus={() => setIsRaised(true)}
				onBlur={e => e.target.value < 1 && setIsRaised(false)}
			/>
		</div>
    )
}

// Subscribe Component
const Subscribe = () => {
	return (
		<form
			className="form"
			onSubmit={e => e.preventDefault()}
		>
			<h3 className="form__title">Subscribe</h3>
			<FieldGroup label="Name"/>
			<FieldGroup label="Email"/>
			<input
				className="form__submit"
				type="submit"
				value="Submit"
				onClick={e => e.target.blur()}
			/>
		</form>
	);
}

ReactDOM.render(
	<Subscribe />,
	document.getElementById('app')
);

style.scss

// Variables

$color-primary: #E9DDFF;
$color-secondary-light: #F6FFCB;
$color-secondary: #CEED40;
$color-secondary-dark: #ADDD2C;
$color-neutral: #FCF8E7;
$color-white: #FFF;
$color-gray: #E5E5E5;
$color-gray-dark: #52524E;
$color-black: #000;

// General

html {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	box-sizing: border-box;
	font-size: 62.5%; // 1rem = 10px
	
	* { box-sizing: inherit; }
}

body {
	background-color: $color-neutral;
	display: grid;
	font-family: Poppins, sans-serif;
	font-size: 1.6rem;
	min-height: 100vh;
	place-content: center;
}

// Form

.form {
	background-color: $color-primary;
	border: 2px solid $color-black;
	border-radius: 1.6rem;
	box-shadow: 6px 6px 0 $color-black;
	max-width: 100%;
	padding: 2.4rem 4rem 3.2rem;
	width: 48rem;
	
	&__title {
		font-size: 4rem;
		margin: 0 0 1.6rem;
	}
	
	&__field-group {
		position: relative;
	}
	
	&__label {
		color: $color-gray-dark;
		font-family: inherit;
		font-size: 1.6rem;
		left: 1.6rem;
		margin: 0;
		pointer-events: none;
		position: absolute;
		top: 2rem;
		transition: 0.2s ease font-size,
					0.2s ease top;
		
		&--raised {
			font-size: 1.4rem;
			top: 0.8rem;
		}
	}
	
	&__input {
		background-color: $color-white;
		border: 2px solid $color-black;
		border-radius: 6px;
		box-shadow: inset 0 2px 0 $color-gray;
		font-family: inherit;
		font-size: 2rem;
		font-weight: bold;
		margin-bottom: 1.6rem;
		outline: none;
		padding: 2.4rem 1.6rem 0.8rem;
		width: 100%;
	}
	
	&__submit {
		background-color: $color-secondary;
		border: 2px solid $color-black;
		border-radius: 6px;
		box-shadow: inset 0 2px 0 $color-secondary-light,
					3px 3px 0 $color-black;
		cursor: pointer;
		font-family: inherit;
		font-size: 2rem;
		font-weight: bold;
		outline: none;
		padding: 1.6rem 4rem;
		
		&:focus {
			text-decoration: underline;
		}
		
		&:active {
			background-color: $color-secondary-dark;
			box-shadow: inset 0 2px 0 $color-secondary,
						1px 1px 0 $color-black;
			text-decoration: none;
		}
	}
}

styles

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&amp;display=swap" rel="stylesheet" />