Forms Component

Axiom provides a solid foundation for building accessible and user-friendly forms. Components are designed to be flexible and can be easily combined to create complex data entry experiences.

Live Demo

Code Example

<form>
  <label for="text-input">Text Input</label>
  <input type="text" id="text-input" placeholder="Enter some text">

  <label for="password-input">Password Input</label>
  <input type="password" id="password-input" placeholder="Enter a password">

  <label for="select-input">Select</label>
  <select id="select-input">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>

  <label>Checkboxes</label>
  <div class="checkbox-group">
    <label><input type="checkbox" checked> Checkbox 1</label>
    <label><input type="checkbox"> Checkbox 2</label>
  </div>

  <label>Radio Buttons</label>
  <div class="radio-group">
    <label><input type="radio" name="radio-group" checked> Radio 1</label>
    <label><input type="radio" name="radio-group"> Radio 2</label>
  </div>
</form>

Contact Form Example

Validation States Example

CSS Variables

.form {
  --form-spacing: var(--a-space-l);
  --form-input-bg: var(--a-color-surface);
  --form-input-border: var(--a-color-outline);
  --form-focus-color: var(--a-color-primary);
  --form-error-color: var(--a-color-error);
  --form-success-color: var(--a-color-success);
}

Accessibility Features

Proper form labeling with <label> elements
ARIA descriptions for validation messages
Live regions for dynamic error announcements
Keyboard navigation support
Screen reader friendly validation states