Forms Component

Axiom01 provides a solid and accessible foundation for building user-friendly forms. All standard form elements are styled to be consistent with the framework's theme, ensuring a cohesive look and feel across your application.

Basic Form Elements

Code Example

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

		 <label for="email-input">Email Input</label>
		 <input type="email" id="email-input" placeholder="your@example.com">

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

		 <label for="select-input">Select Option</label>
		 <select id="select-input">
				 <option value="">Choose an option</option>
				 <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> Remember me</label>
				 <label><input type="checkbox"> Agree to terms</label>
		 </div>

		 <label>Radio Buttons</label>
		 <div class="radio group">
				 <label><input type="radio" name="radio-group" value="option1" checked> Option 1</label>
				 <label><input type="radio" name="radio-group" value="option2"> Option 2</label>
		 </div>

		 <label for="textarea-input">Textarea</label>
		 <textarea id="textarea-input" placeholder="Your message..."></textarea>

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

Usage Guidelines

Axiom01 automatically styles native HTML form elements. For custom layouts or more complex interactions (e.g., validation feedback, input groups), you can wrap elements in divs and apply additional styling as needed. The framework ensures that inputs, selects, and textareas are consistently sized and themed.

Always associate labels with their respective form controls using the for and id attributes to ensure accessibility.

Accessibility

  • All form elements are designed with accessibility in mind, ensuring proper focus management and keyboard navigation.
  • Labels are correctly associated with their inputs using for and id attributes.
  • Radio buttons and checkboxes are grouped semantically.

Customization

Customize the appearance of form elements using Axiom01's CSS variables for colors, spacing, and typography. You can override default styles for inputs, selects, textareas, and buttons to match your application's specific design requirements.