Forms - Vanilla CSS Design System

Basic Input Fields

Standard text input fields with labels and different states.

<div class="form-group">
	<label class="form-label" for="username">Username</label>
	<input type="text" class="form-input" id="username" placeholder="Enter username">
</div>

Validation States

Input fields with validation states and feedback messages.

<div class="form-group">
	<label class="form-label" for="valid-input">Valid Input</label>
	<input type="text" class="form-input is-valid" id="valid-input" value="Correct input">
	<span class="form-feedback valid">This input is valid!</span>
</div>

Select and Textarea

Dropdown select menus and multiline text areas.

<div class="form-group">
	<label class="form-label" for="select-example">Select Option</label>
	<select class="form-select" id="select-example">
		<option>Select an option</option>
		<option>Option 1</option>
		<option>Option 2</option>
		<option>Option 3</option>
	</select>
</div>

Checkboxes and Radio Buttons

Custom styled checkboxes and radio button groups.

<div class="form-check">
	<input type="checkbox" class="form-check-input" id="checkbox1">
	<label class="form-check-label" for="checkbox1">Checkbox 1</label>
</div>

Input Groups

Input fields with prepended or appended text.

Price

$

<div class="input-group">
	<span class="input-group-text">$</span>
	<input type="text" class="form-input" id="price-input" placeholder="0.00">
</div>

Search

🔍

<div class="form-search">
	<span class="form-search-icon">🔍</span>
	<input type="search" class="form-input" id="search-input" placeholder="Search...">
</div>

Complete Form Example

A complete form combining various form elements.

<form class="card">
	<div class="form-grid">
		<div class="col-span-6">
			<div class="form-group">
				<label class="form-label required" for="first-name">First Name</label>
				<input type="text" class="form-input" id="first-name" required>
			</div>
		</div>
		...
	</div>
</form>