Forms
Form controls, inputs, and submission patterns for collecting user data.
Form Inputs
Standard input fields with labels, hints, and validation styles.
We'll never share your email.
<div class="form-group">
<label class="form-label">Label</label>
<input type="text" class="form-input">
<span class="form-hint">Help text</span>
</div>
<div class="form-group">
<label class="form-label">Select</label>
<select class="form-select">
<option>Option 1</option>
</select>
</div>
Checkboxes & Radios
Selection controls for single or multiple choices.
<label class="form-checkbox">
<input type="checkbox" checked> Option A
</label>
<label class="form-radio">
<input type="radio" name="group"> Choice 1
</label>
<!-- Horizontal layout -->
<div class="radio-horizontal">
<label class="form-radio">
<input type="radio" name="h"> Yes
</label>
<label class="form-radio">
<input type="radio" name="h"> No
</label>
</div>
Buttons
Action buttons with various styles, colors, and sizes.
Solid Buttons:
Outline Buttons:
Other Styles:
Sizes:
<button class="btn btn-primary">Primary</button>
<button class="btn btn-outline-secondary">Outline</button>
<button class="btn btn-ghost">Ghost</button>
<button class="btn btn-link">Link</button>
<!-- Sizes -->
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary btn-lg">Large</button>
Form Submission
Use w-action for built-in CRUD operations with automatic data handling.
Forms can submit data using the w-action attribute for create, update, and delete operations.
<form action="/w-action/posts?w-action=create&w-redirect=/posts">
<input type="text" name="title" class="form-input">
<button type="submit" class="btn btn-primary">
Create
</button>
</form>