Form Elements

Axiom01 provides beautifully styled, accessible form controls that work consistently across all browsers and devices.

Form Design Philosophy

Axiom01's form system is built with these core principles:

Semantic HTML - Use native form elements, not custom components
Accessibility First - Keyboard navigation, screen readers, and focus management built-in
Consistency - All inputs, selects, and textareas follow the same design language
Clarity - Error states, validation, and hints are always clear and visible
Responsiveness - Forms automatically adapt to mobile, tablet, and desktop

Text Inputs

Standard text input fields for various data types, all with consistent styling and focus states.

Live Examples

Text Input Text Input

Email Input Email Input

Password Input Password Input

URL Input URL Input

Number Input Number Input

Search Input Search Input

HTML & CSS

<label for="email">Email Address</label>
<input type="email" id="email" placeholder="you@example.com">

<label for="password">Password</label>
<input type="password" id="password" placeholder="••••••••">

<label for="search">Search</label>
<input type="search" id="search" placeholder="Search items...">

Best Practices

Always use the correct type attribute (email, password, number, etc.)
Provide a <label> for every input with a matching for attribute
Use placeholder for examples, not labels
Use required attribute for required fields
Provide helpful validation messages

Textarea

Multi-line text input for longer content like messages, descriptions, and reviews.

Live Example

Textarea Example Message

HTML

<label for="feedback">Feedback</label>
<textarea id="feedback" rows="6" placeholder="Tell us what you think..."></textarea>

Select Dropdowns

Choose one option from a list. Best used when there are 3-10 options.

Live Example

Select Dropdown Country

HTML

<label for="option">Choose an option</label>
<select id="option">
  <option value="">Select one...</option>
  <option value="opt1">Option 1</option>
  <option value="opt2">Option 2</option>
  <option value="opt3">Option 3</option>
</select>

Grouped Options

<select id="fruit">
  <optgroup label="Citrus">
    <option>Orange</option>
    <option>Lemon</option>
  </optgroup>
  <optgroup label="Berries">
    <option>Strawberry</option>
    <option>Blueberry</option>
  </optgroup>
</select>

Checkboxes

Allow users to select multiple options from a list. Use when multiple selections are needed.

Live Example

Choose your interests Design Development Marketing Accessibility

HTML

<fieldset>
  <legend>What do you prefer?</legend>
  <label>
    <input type="checkbox" name="option" value="1">
    Option 1
  </label>
  <label>
    <input type="checkbox" name="option" value="2" checked>
    Option 2
  </label>
</fieldset>

Best Practices

Use <fieldset> and <legend> to group related checkboxes
Place the label text after the input for better mobile click targets
Show checked state clearly (usually filled background + checkmark)

Radio Buttons

Allow users to select exactly one option from a list. Use when only one selection is allowed.

Live Example

Choose a size Small Medium Large

HTML

<fieldset>
  <legend>Select one option</legend>
  <label>
    <input type="radio" name="choice" value="a">
    Option A
  </label>
  <label>
    <input type="radio" name="choice" value="b" checked>
    Option B
  </label>
</fieldset>

Important Rules

All radio buttons in a group must have the same name attribute
Each radio button needs a unique value attribute
Use <fieldset> and <legend> to describe the group

Date & Time Inputs

Specialized input types for dates, times, and date ranges.

Live Example

Date Input Date

Date & Time Input Date & Time

Time Input Time

Month Input Month

HTML

<label for="date">Select a date</label>
<input type="date" id="date" min="2024-01-01" max="2024-12-31">

<label for="datetime">Select date and time</label>
<input type="datetime-local" id="datetime">

<label for="time">Select a time</label>
<input type="time" id="time">

Form Validation

HTML5 provides built-in validation that works consistently with Axiom01's styling.

Live Example

Required Field Required Field

Email Validation Valid Email Required

Minimum Length Minimum 5 Characters

Number Range Number Between 1-10

Validation Attributes

<!-- Required field -->
<input type="text" required>

<!-- Email validation -->
<input type="email" required>

<!-- Minimum/Maximum length -->
<input type="text" minlength="5" maxlength="20">

<!-- Number range -->
<input type="number" min="0" max="100">

<!-- Pattern (regex) -->
<input type="text" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

<!-- Custom validation message -->
<input type="email" required title="Please enter a valid email address">

Disabled & Readonly States

Clearly indicate when fields are not available for interaction.

Live Example

Disabled State Disabled Input

Readonly State Readonly Input

HTML

<!-- Disabled - cannot interact -->
<input type="text" disabled>

<!-- Readonly - can select but not edit -->
<input type="text" readonly>

When to Use Each

Disabled - Field is not available right now (e.g., not applicable to current selection)
Readonly - Field shows data that cannot be changed (e.g., auto-calculated field)

Form Layout

Structure your forms with consistent spacing and clear visual hierarchy.

Vertical Form (Recommended for Accessibility)

<form>
  <fieldset>
    <legend>User Information</legend>
    <label for="name">Full Name</label>
    <input type="text" id="name" required>
  </fieldset>

  <fieldset>
    <legend>Contact Information</legend>
    <label for="email">Email Address</label>
    <input type="email" id="email" required>
  </fieldset>

  <button type="submit" class="primary">Submit</button>
</form>

Two-Column Layout (Tablet+)

<form>
  <fieldset class="layout-grid two-column">
    <legend>Full Name</legend>
    <label for="first">First Name</label>
    <input type="text" id="first" required>
    
    <label for="last">Last Name</label>
    <input type="text" id="last" required>
  </fieldset>

  <button type="submit" class="primary">Submit</button>
</form>

Accessibility Guidelines

Forms must be accessible to all users, including those using screen readers and keyboard navigation.

Use labels - Every input should have a <label> with a matching for attribute
Group related controls - Use <fieldset> and <legend>
Keyboard navigation - Users should be able to tab through all form controls
Error messages - Should be clearly associated with the field they relate to
Focus states - Must be visible (Axiom01 handles this automatically)
Placeholder text - Should not be a substitute for labels
Type attributes - Help mobile browsers show appropriate keyboards (email, tel, number, etc.)

Form Related Components

Explore these additional form-related components in the component library:

Forms Component - Complete form examples
Field Validation - Form field states, errors, and focus management
Multi-Step Form - Wizard patterns
Steps - Multi-step progression indicator
Chip Input - Tag input component
File Upload - File input patterns
Slider - Range input component
Datepicker - Date selection component