Skip to content
Docs / Components / Forms

Forms

Form controls, layouts, validation states, and real-world patterns built with Nimbus.

Text Inputs

Text inputs are the most common form control. Use .hu-form-control for default sizing, and size variants for compact or spacious layouts.

Default Input
HTML 
<div class="hu-form-group">
    <label class="hu-form-label">Server Name</label>
    <input type="text" class="hu-form-control" placeholder="e.g. web-server-01">
</div>
With Placeholder
HTML 
<div class="hu-form-group">
    <label class="hu-form-label">Email Address</label>
    <input type="email" class="hu-form-control" placeholder="admin@example.com">
</div>
Disabled
HTML 
<div class="hu-form-group">
    <label class="hu-form-label">Account ID</label>
    <input type="text" class="hu-form-control" value="ACC-001234" disabled>
</div>
Readonly
HTML 
<div class="hu-form-group">
    <label class="hu-form-label">IP Address</label>
    <input type="text" class="hu-form-control" value="192.168.1.100" readonly>
</div>
Sizes
HTML 
<input type="text" class="hu-form-control hu-form-control-sm" placeholder="Small">
<input type="text" class="hu-form-control" placeholder="Medium">
<input type="text" class="hu-form-control hu-form-control-lg" placeholder="Large">

Select

Use .hu-form-select for styled dropdown selects.

Basic Select
HTML 
<div class="hu-form-group">
    <label class="hu-form-label">Hosting Plan</label>
    <select class="hu-form-select">
        <option value="" disabled selected>Choose a plan...</option>
        <option value="starter">Starter - $4.99/mo</option>
        <option value="business">Business - $9.99/mo</option>
        <option value="pro">Professional - $19.99/mo</option>
    </select>
</div>

Textarea

Use .hu-form-textarea for multi-line text input. Supports rows and cols attributes for sizing.

Textarea
Optional. Max 500 characters.
HTML 
<div class="hu-form-group">
    <label class="hu-form-label">Server Notes</label>
    <textarea class="hu-form-textarea" rows="4" placeholder="Add notes..."></textarea>
    <span class="hu-form-hint">Optional. Max 500 characters.</span>
</div>

Checkboxes

Use .hu-form-check with .hu-form-check-input and .hu-form-check-label for styled checkboxes.

Single Checkbox
HTML 
<div class="hu-form-check">
    <input type="checkbox" class="hu-form-check-input" id="checkTerms">
    <label class="hu-form-check-label" for="checkTerms">I agree to the Terms of Service</label>
</div>
Group of Checkboxes
HTML 
<div class="hu-form-group">
    <label class="hu-form-label">Add-on Services</label>
    <div class="hu-form-check">
        <input type="checkbox" class="hu-form-check-input" id="ssl" checked>
        <label class="hu-form-check-label" for="ssl">SSL Certificate</label>
    </div>
    <div class="hu-form-check">
        <input type="checkbox" class="hu-form-check-input" id="backup">
        <label class="hu-form-check-label" for="backup">Daily Backups</label>
    </div>
    <div class="hu-form-check">
        <input type="checkbox" class="hu-form-check-input" id="cdn">
        <label class="hu-form-check-label" for="cdn">CDN加速</label>
    </div>
</div>

Radio Buttons

Radio buttons allow selecting one option from a set. Use the same .hu-form-check classes with type="radio".

Single Radio
HTML 
<div class="hu-form-check">
    <input type="radio" class="hu-form-check-input" name="plan" id="radio1" checked>
    <label class="hu-form-check-label" for="radio1">Select this plan</label>
</div>
Group of Radios
HTML 
<div class="hu-form-group">
    <label class="hu-form-label">Data Center Location</label>
    <div class="hu-form-check">
        <input type="radio" class="hu-form-check-input" name="datacenter" id="dcUS" checked>
        <label class="hu-form-check-label" for="dcUS">US East (Virginia)</label>
    </div>
    <div class="hu-form-check">
        <input type="radio" class="hu-form-check-input" name="datacenter" id="dcEU">
        <label class="hu-form-check-label" for="dcEU">EU West (Frankfurt)</label>
    </div>
    <div class="hu-form-check">
        <input type="radio" class="hu-form-check-input" name="datacenter" id="dcAP">
        <label class="hu-form-check-label" for="dcAP">Asia Pacific (Singapore)</label>
    </div>
</div>

Switches

Toggle switches use .hu-form-switch with .hu-form-check and .hu-form-check-input.

Toggle Switches
HTML 
<div class="hu-form-check hu-form-switch">
    <input type="checkbox" class="hu-form-check-input" id="switchBackup" checked>
    <label class="hu-form-check-label" for="switchBackup">Automatic Backups</label>
</div>
<div class="hu-form-check hu-form-switch">
    <input type="checkbox" class="hu-form-check-input" id="switchFirewall">
    <label class="hu-form-check-label" for="switchFirewall">Web Application Firewall</label>
</div>

Input Groups

Combine inputs with text or buttons using .hu-input-group and .hu-input-group-text.

Text Prefix & Suffix
https://
/month
HTML 
<div class="hu-input-group">
    <span class="hu-input-group-text">https://</span>
    <input type="text" class="hu-form-control" placeholder="example.com">
</div>

<div class="hu-input-group">
    <input type="text" class="hu-form-control" placeholder="29.99">
    <span class="hu-input-group-text">/month</span>
</div>
Input with Button
HTML 
<div class="hu-input-group">
    <input type="text" class="hu-form-control" placeholder="Enter domain name">
    <button class="hu-btn hu-btn-primary">Search</button>
</div>

Validation States

Add .hu-is-valid or .hu-is-invalid to inputs for validation styling. Use .hu-valid-feedback and .hu-invalid-feedback for messages.

Valid & Invalid States
Username is available!
Please enter a valid email address.
HTML 
<!-- Valid -->
<div class="hu-form-group">
    <label class="hu-form-label">Username</label>
    <input type="text" class="hu-form-control hu-is-valid" value="hostadmin">
    <span class="hu-valid-feedback">Username is available!</span>
</div>

<!-- Invalid -->
<div class="hu-form-group">
    <label class="hu-form-label">Email</label>
    <input type="email" class="hu-form-control hu-is-invalid" value="not-an-email">
    <span class="hu-invalid-feedback">Please enter a valid email address.</span>
</div>

Form Layout

Use horizontal layout for side-by-side labels and controls, and grid layouts for multi-column forms.

Horizontal Form
HTML 
<div class="hu-form-group" style="display: flex; align-items: center; gap: 1rem;">
    <label class="hu-form-label" style="min-width: 120px; margin-bottom: 0;">Domain</label>
    <input type="text" class="hu-form-control" placeholder="example.com">
</div>
<div class="hu-form-group" style="display: flex; align-items: center; gap: 1rem;">
    <label class="hu-form-label" style="min-width: 120px; margin-bottom: 0;">Plan</label>
    <select class="hu-form-select">...</select>
</div>
Form Grid
HTML 
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
    <div class="hu-form-group">
        <label class="hu-form-label">First Name</label>
        <input type="text" class="hu-form-control" placeholder="John">
    </div>
    <div class="hu-form-group">
        <label class="hu-form-label">Last Name</label>
        <input type="text" class="hu-form-control" placeholder="Doe">
    </div>
</div>

Real-World Examples

Real-world form patterns commonly used in dashboards and admin panels and customer portals.

Domain Search Form

Find Your Perfect Domain

Search from millions of available domain names.

Free WHOIS privacy included with every registration.
HTML 
<div class="hu-card" style="max-width: 480px;">
    <div class="hu-card-body" style="text-align: center;">
        <h3 class="hu-card-title">Find Your Perfect Domain</h3>
        <p class="hu-card-text">Search from millions of available domain names.</p>
        <div class="hu-input-group">
            <input type="text" class="hu-form-control hu-form-control-lg" placeholder="yourdomain">
            <select class="hu-form-select" style="max-width: 120px;">
                <option>.com</option>
                <option>.net</option>
                <option>.org</option>
                <option>.io</option>
            </select>
            <button class="hu-btn hu-btn-primary hu-btn-lg">Search</button>
        </div>
        <span class="hu-form-hint">Free WHOIS privacy included.</span>
    </div>
</div>
Hosting Order Form
Configure Your Hosting
HTML 
<div class="hu-card">
    <div class="hu-card-header">
        <strong>Configure Your Hosting</strong>
    </div>
    <div class="hu-card-body">
        <div class="hu-form-group">
            <label class="hu-form-label hu-required">Hosting Plan</label>
            <select class="hu-form-select">...</select>
        </div>
        <div class="hu-form-group">
            <label class="hu-form-label hu-required">Domain Name</label>
            <div class="hu-input-group">
                <input type="text" class="hu-form-control" placeholder="yourdomain">
                <select class="hu-form-select">...</select>
            </div>
        </div>
        <div class="hu-form-group">
            <label class="hu-form-label hu-required">Billing Cycle</label>
            <div class="hu-form-check">
                <input type="radio" class="hu-form-check-input" name="billing" id="monthly" checked>
                <label class="hu-form-check-label" for="monthly">Monthly</label>
            </div>
            <div class="hu-form-check">
                <input type="radio" class="hu-form-check-input" name="billing" id="annual">
                <label class="hu-form-check-label" for="annual">Annual (Save 20%)</label>
            </div>
        </div>
        <div class="hu-form-check hu-form-switch">
            <input type="checkbox" class="hu-form-check-input" id="autoRenew" checked>
            <label class="hu-form-check-label" for="autoRenew">Enable Auto-Renewal</label>
        </div>
        <button class="hu-btn hu-btn-primary hu-btn-block">Continue to Checkout</button>
    </div>
</div>
Contact / Support Form
Contact Support
HTML 
<div class="hu-card">
    <div class="hu-card-header">
        <strong>Contact Support</strong>
    </div>
    <div class="hu-card-body">
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="hu-form-group">
                <label class="hu-form-label hu-required">First Name</label>
                <input type="text" class="hu-form-control" placeholder="John">
            </div>
            <div class="hu-form-group">
                <label class="hu-form-label hu-required">Last Name</label>
                <input type="text" class="hu-form-control" placeholder="Doe">
            </div>
        </div>
        <div class="hu-form-group">
            <label class="hu-form-label hu-required">Email Address</label>
            <input type="email" class="hu-form-control" placeholder="john@example.com">
        </div>
        <div class="hu-form-group">
            <label class="hu-form-label hu-required">Subject</label>
            <select class="hu-form-select">...</select>
        </div>
        <div class="hu-form-group">
            <label class="hu-form-label hu-required">Message</label>
            <textarea class="hu-form-textarea" rows="4" placeholder="Describe your issue..."></textarea>
        </div>
        <button class="hu-btn hu-btn-primary hu-btn-block">Submit Ticket</button>
    </div>
</div>

API Reference

Complete list of CSS classes available for forms.

Class Description
.hu-form-group Wrapper for a label, control, and hint/message. Provides vertical spacing.
.hu-form-label Styled label for form controls. Use with .hu-required for required indicator.
.hu-required Adds a red asterisk to the label indicating a required field.
.hu-form-control Base text input, email, password, etc. with padding, border, and focus ring.
.hu-form-control-sm Small input variant with reduced padding and font size.
.hu-form-control-lg Large input variant with increased padding and font size.
.hu-form-select Styled select dropdown matching form control appearance.
.hu-form-textarea Styled textarea for multi-line text input.
.hu-form-check Wrapper for checkbox or radio input and its label. Provides alignment.
.hu-form-check-input Styled checkbox or radio input element.
.hu-form-check-label Label associated with a checkbox or radio input.
.hu-form-switch Modifier for .hu-form-check to render a toggle switch style.
.hu-input-group Flex container to attach text or buttons to inputs side-by-side.
.hu-input-group-text Text element attached to input for prefix/suffix content.
.hu-form-hint Small helper text below an input. Typically muted or secondary color.
.hu-valid-feedback Success message shown when input has .hu-is-valid.
.hu-invalid-feedback Error message shown when input has .hu-is-invalid.
.hu-is-valid Adds green border and styling for valid state.
.hu-is-invalid Adds red border and styling for invalid state.