Forms
Styled inputs, selects, textareas, checkboxes, radios, sizes, and validation states.
Text Inputs
Standard text inputs with labels and helper text.
We'll never share your email with anyone else.
<div class="n-form-group">
<label class="n-label" for="email">Email</label>
<input class="n-input" type="email"
id="email"
placeholder="you@example.com">
<p class="n-helper-text">Helper text</p>
</div>
Input Sizes
Three sizes for different form contexts.
Select
Custom-styled dropdown select with a chevron indicator.
<label class="n-label" for="role">Role</label>
<select class="n-select" id="role">
<option>Designer</option>
<option>Developer</option>
</select>
Textarea
Multi-line text input with vertical resizing.
Checkboxes & Radios
Native checkboxes and radios with accent color styling.
Checkboxes
Radios
Validation States
Success and error states with colored borders and helper messages.
Username is available!
Please enter a valid email address.
<!-- Success -->
<input class="n-input n-input-success" value="Valid">
<!-- Error -->
<input class="n-input n-input-error" value="Invalid">
<p class="n-error-text">Error message</p>
Full Form Example
A complete form combining all elements.
Create Account
Must be at least 8 characters.