Basic forms done.

src/forms.scss

@@ -0,0 +1,163 @@
+@use "palette";
+
+form {
+    display: grid;
+    width: min(100%, 75ch);
+    grid-template-columns: max-content min-content 1fr;
+
+    > * {
+        font-family: 'Manrope', sans-serif;
+    }
+
+    > label:not(.description) {
+        grid-column: 1 / 2;
+        margin-right: 1rem;
+        place-self: center end;
+    }
+
+    > label.description {
+        margin-left: .5rem;
+        grid-column: 3 / 4;
+        place-self: center start;
+    }
+
+    > input,
+    select,
+    textarea,
+    p.hint {
+        grid-column: 2 / 4;
+    }
+
+    p.hint {
+        font-size: .75rem;
+        margin: 0 .5rem;
+    }
+
+    input[type="checkbox"],
+    input[type="radio"] {
+        grid-column: 2 / 3;
+    }
+}
+
+input,
+textarea {
+    background-color: palette.$standout;
+    border: .1rem solid palette.$standout;
+    margin: .5rem;
+    padding: .5rem .75rem;
+    font-family: 'Manrope', sans-serif;
+    font-size: 1rem;
+    transition: border-color .3s;
+    display: block;
+
+    &:hover {
+        border-color: palette.$primary;
+    }
+
+    &:active,
+    &:focus {
+        border-color: palette.$primary;
+        outline: .1rem solid palette.$primary;
+    }
+
+    &::placeholder {
+        color: palette.$grey600;
+    }
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    cursor: pointer;
+    appearance: none;
+    height: 1rem;
+    width: 1rem;
+    padding: .75rem;
+    display: block;
+
+    background-color: palette.$standout;
+    border: .15rem solid palette.$grey200;
+    border-radius: .5rem;
+
+    position: relative;
+
+    transition: color .3s, background-color .3s, border-color .3s;
+
+    &:checked {
+        border-color: palette.$primary;
+        background-color: palette.$primary;
+
+        &::after {
+            content: '✔';
+            font-size: 125%;
+
+            @if lightness(palette.$primary) > 50 {
+                color: palette.$grey50
+            }
+
+            @else {
+                color: palette.$grey900
+            }
+
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            translate: -50% -50%;
+            transition: translate .3s,
+            left .3s,
+            background-color .3s;
+        }
+    }
+}
+
+input[type="radio"] {
+    border-radius: 100%;
+
+    &:checked::after {
+        content: '';
+
+        @if lightness(palette.$primary) > 50 {
+            background-color: palette.$grey50
+        }
+
+        @else {
+            background-color: palette.$grey900
+        }
+
+        border-radius: 100%;
+        width: 80%;
+        height: 80%;
+        position: absolute;
+    }
+}
+
+input[type="checkbox"].switch {
+    height: 1px;
+    width: 3rem;
+    border-radius: 1rem;
+
+    &::after {
+        content: '';
+        background-color: palette.$grey200;
+
+        border-radius: 100%;
+        height: 80%;
+        aspect-ratio: 1 / 1;
+        position: absolute;
+        top: 50%;
+        left: .1rem;
+        translate: 0 -50%;
+    }
+
+    &:checked::after {
+        left: calc(100% - .1rem);
+        translate: -100% -50%;
+
+        @if lightness(palette.$primary) > 50 {
+            background-color: palette.$grey50
+        }
+
+        @else {
+            background-color: palette.$grey900
+        }
+    }
+}

src/main.scss

@@ -5,5 +5,6 @@
 @use "headings";
 @use "text";
 @use "buttons";
+@use "forms";
 
 @use "layouts/publishing";

web/pages/forms.njk

@@ -0,0 +1,47 @@
+{% extends "templates/publishing.njk" %}
+
+{% block main %}
+	<h1>Form input elements</h1>
+	<form action="#">
+
+		<label for="text">Text input:</label>
+		<input type="text" name="text" id="text" placeholder="Placeholder">
+
+		<label for="password">Password:</label>
+		<input type="password" name="password" id="password" placeholder="Password">
+		<p class="hint">This is a hint telling you that your password should be at least 5 characters long.</p>
+
+		<label for="textarea">Textarea:</label>
+		<textarea name="textarea" id="textarea" placeholder="Write your text here..."></textarea>
+
+		<input type="checkbox" name="checkbox" id="checkbox">
+		<label class="description" for="checkbox">Accept this checkbox.</label>
+
+		<input class="switch" type="checkbox" name="switch" id="switch">
+		<label class="description" for="switch">Turn on this switch.</label>
+
+		<input type="radio" name="radio" id="radio">
+		<label class="description" for="radio">Select this radio button.</label>
+
+		<label for="color">Color:</label>
+		<input type="color" name="color" id="color">
+
+		<label for="file">File:</label>
+		<input type="file" name="file" id="file">
+
+		<label for="date">Date:</label>
+		<input type="date" name="date" id="date">
+
+		<label for="range">Range:</label>
+		<input type="range" name="range" id="range">
+
+		<label for="select">Select:</label>
+		<select name="select" id="select">
+			<option value="select1">Select 1</option>
+			<option value="select2">Select 2</option>
+			<option value="select3">Select 3</option>
+			<option value="select4">Select 4</option>
+			<option value="select5">Select 5</option>
+		</select>
+	</form>
+{% endblock %}

web/pages/index.njk

@@ -7,4 +7,5 @@
 	<p><a href="/headings">Headings</a></p>
 	<p><a href="/buttons">Buttons</a></p>
 	<p><a href="/text">Text</a></p>
+	<p><a href="/forms">Forms</a></p>
 {% endblock %}