Forms & Inputs
Accessible, responsive, and highly customizable form components built for modern web applications. Fully keyboard-navigable and screen-reader friendly.
Text Inputs
Standard text fields for capturing user data. Supports focus states, disabled states, and custom icons.
Usage Notes
Always pair inputs with a descriptive label. Use the .input-wrapper class for icon alignment. Disabled inputs automatically apply reduced opacity and pointer-events.
Textareas & Selects
Multi-line text inputs and dropdown selectors with consistent styling and native browser fallbacks.
Usage Notes
Textareas support vertical resizing by default. Select dropdowns use a custom chevron icon while preserving native accessibility and form submission behavior.
Checkboxes & Radios
Custom-styled selection controls that replace default browser checkboxes and radio buttons.
Usage Notes
Wraps native inputs with custom CSS marks. Maintains full keyboard navigation (Space for checkboxes, Arrow keys for radios) and screen reader announcements.
Toggle Switches
Binary state controls for on/off settings. Ideal for preferences and feature flags.
Usage Notes
Pure CSS implementation using checkbox state. Focus ring appears on keyboard navigation. Add aria-pressed dynamically via JS if needed for complex apps.
Validation States
Visual feedback for success, error, and warning conditions. Pair with hint text for clarity.
Usage Notes
Apply .input-success, .input-error, or .input-warning to any input. Use corresponding hint classes for accessible messaging. Always validate on blur and submit.
Complete Form Layout
Responsive grid layout combining multiple components with proper spacing and action buttons.
Usage Notes
Use .form-grid for responsive two-column layouts that collapse on mobile. Always include clear cancel/submit actions. Add required attributes and JS validation for production use.