# ui-inputs

- Author: AzkaKhizer
- Repository: AzkaKhizer/todoapp-phase5
- Version: 20260208000416
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-07
- Source: https://github.com/AzkaKhizer/todoapp-phase5
- Web: https://mule.run/skillshub/@@AzkaKhizer/todoapp-phase5~ui-inputs:20260208000416

---

# Skill: Modern Inputs & Forms

## Purpose
Create modern, accessible input fields with a premium feel.

## Design Style
- Clean
- Soft borders
- Optional glass effect
- Clear focus states

## Core Styles
- Height: 44–48px
- Border radius: 10–14px
- Background:
  - Solid: #f9fafb
  - Glass: rgba(255,255,255,0.18)
- Border: subtle, not heavy

## Focus State
- Border highlight
- Soft glow
- No harsh outlines

## Input Types
- Text
- Email
- Password
- Select
- Textarea

## Labels & UX
- Always visible labels or floating labels
- Error messages below input
- Placeholder is optional

## Accessibility
- Proper label association
- Keyboard-friendly
- aria-invalid for errors

## Do Not
- Do not rely only on placeholder text
- Do not hide focus indicators