Design System · ComponentsForms & Inputs
All form elements of the system — from simple inputs to selects, toggles and validations. Built with pure CSS and accessibility first.
Component
Text Input
Text input in all states: default, focus, filled, disabled and error. The orange border is the signal of active interaction in the system.
/* Estados de input */
.input:focus { border-color: var(--brand-orange); box-shadow: 0 0 0 3px rgba(242,126,75,.12); }
.input.error { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.1); }
.input.success { border-color: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.1); }
.input:disabled { opacity: .45; cursor: not-allowed; }
Component
Select
Custom dropdown with triangular arrow via CSS and native appearance removed. Fully responsive and keyboard accessible.
Component
Checkbox
Personalized checkboxes with pure CSS. The checked state uses the orange-gold brand gradient. Works with the hidden native input.
Component
Radio Buttons
Custom radio buttons for exclusive selection. The internal indicator uses the brand gradient in the selected state.
Component
Toggle Switch
Toggle switch animated in pure CSS. The thumb slides smoothly with cubic-bezier. No JavaScript — works with CSS + hidden input only.
Component
Range Slider
Range slider customized with gradient orange thumb. Ideal for numeric inputs like supplement dosage, age or intensity level.
Component
Textarea
Multi-line text field with controlled vertical resize. Maintains the same visual rules as inputs: orange focus, light gray placeholder.
States
Validation States
Three validation states with feedback messages: success (green), error (red) and warning (gold). Each with icon and contextual message.