Forms
ArchCSS provides base form styling and helper classes for inputs, labels, controls, checkboxes, and search boxes. Forms are styled automatically with sensible defaults and can be extended with utilities.
Basic form
Wrap inputs in a <form> element. ArchCSS applies default styling - centered text, rounded borders, and full-width inputs on mobile.
Preview
<form>
<div class="form-block">
<label class="form-label">Email</label>
<input type="email" class="form-control" placeholder="you@example.com">
</div>
<div class="form-block">
<label class="form-label">Password</label>
<input type="password" class="form-control">
</div>
<button type="submit" class="bg-primary text-white px-4 py-1 rounded border-0">
Sign in
</button>
</form>Form classes
ArchCSS provides a small set of form-specific classes for layout and styling.
| Class | Description |
|---|---|
.form-block | Vertical spacing wrapper for form groups |
.form-control | Full-width input with border, padding, and validation styles |
.form-label | Label with bottom margin |
.form-check | Flex-centered container for checkbox/radio + label |
.form-check-label | Label inside a check group with left margin |
.form-select | Styled select element with inherited font size |
Form control
The .form-control class applies full-width styling, border, padding, and border-radius. Invalid fields that are not focused receive a warning border automatically.
<input type="text" class="form-control" placeholder="Full-width input">
<input type="email" class="form-control" required> <!-- warning border when invalid -->Checkboxes & radios
Use .form-check or the alias .checkbox to create a flex-centered checkbox or radio group.
Preview
<div class="form-check">
<input type="checkbox" id="opt1">
<label class="form-check-label" for="opt1">Option A</label>
</div>
<!-- Alias -->
<div class="checkbox">
<input type="checkbox" id="opt2">
<label class="checkbox-label" for="opt2">Option B</label>
</div>Searchbox
The .searchbox class creates an inline-flex search container with a bordered wrapper. Nest a .form-control and a button inside.
Preview
<div class="searchbox">
<input type="text" class="form-control" placeholder="Search...">
<button>
<i data-lucide="search"></i>
</button>
</div>Autofill colors
Override the browser's autofill background color with .auto-fill-{color}. Uses a box-shadow trick to replace the default yellow/blue autofill background.
<input type="email" class="form-control auto-fill-white">
<input type="password" class="form-control auto-fill-light">Utility-first forms. ArchCSS form classes provide sensible defaults. Combine them with spacing, color, border, and text utilities for full customization - no separate form component system needed.