Inputs
Inner shadow creates depth. Focus glow makes the active field unmistakable. Error states never rely on color alone.
Text Input
Default and glass variants.
States
All states every input must handle.
Enter a valid email address
Email is available
Focus any input above to see the neon glow focus ring.
Textarea
Same visual grammar as text inputs.
Minimum 20 characters required
Select
Native select with design system styling.
File Input
Native file picker with CSS-only styling. Use with accept and helper text for constraints.
PNG or JPG up to 2MB.
You can select multiple files.
File Dropper
Drop area with drag feedback and selected-file listing, but still grounded on native file input behavior.
Use for single-file uploads with compact constraints.
Keep size and file-type rules visible outside the drop area.
Range Slider
Native input[type="range"] styled for volume, thresholds and numeric preferences.
Current value: 64%
Current value: 7/10
Rating
CSS-only stars with native radios. Keeps keyboard and screen reader semantics by default.
Current sample: 4 stars.
Current sample: 3 stars.
Checkbox & Radio
Accent-colored controls for selection.
Checkbox
Radio
Switch
Toggle for binary on/off settings.
Usage rules
Do
- Always pair inputs with a visible label
- Use aria-describedby for error messages
- Show error icon alongside error color
- Prefer native controls before custom JS widgets
- Keep placeholder as hint, not as label
Don't
- Don't rely on placeholder as the label
- Don't use color alone for error state
- Don't hide file constraints from users
- Don't remove the focus ring for any reason
- Don't blur glass inputs on small containers