phonix-input
Version:
A modern, customizable React phone input component with country code selection, flags, and validation. Features responsive design, TypeScript support, and easy integration.
1 lines • 20.8 kB
CSS
.rbt .rbt-input-main::-ms-clear{display:none}.rbt-menu{margin-bottom:2px}.rbt-menu>.dropdown-item{overflow:hidden;text-overflow:ellipsis}.rbt-menu>.dropdown-item:focus{outline:none}.rbt-menu-pagination-option{text-align:center}.rbt-input-multi{cursor:text;overflow:hidden;position:relative}.rbt-input-multi.focus{border-color:#80bdff;box-shadow:0 0 0 .2rem rgba(0,123,255,.25);color:#495057;outline:0}.rbt-input-multi.form-control{height:auto}.rbt-input-multi.disabled{background-color:#e9ecef;opacity:1}.rbt-input-multi.is-invalid.focus{border-color:#dc3545;box-shadow:0 0 0 .2rem rgba(220,53,69,.25)}.rbt-input-multi.is-valid.focus{border-color:#28a745;box-shadow:0 0 0 .2rem rgba(40,167,69,.25)}.rbt-input-multi input::-moz-placeholder{color:#6c757d;opacity:1}.rbt-input-multi input:-ms-input-placeholder{color:#6c757d}.rbt-input-multi input::-webkit-input-placeholder{color:#6c757d}.rbt-input-multi .rbt-input-wrapper{align-items:flex-start;display:flex;flex-wrap:wrap;margin-bottom:-4px;margin-top:-1px;overflow:hidden}.rbt-input-multi .rbt-input-main{margin:1px 0 4px}.rbt-close{z-index:1}.rbt-close-lg{font-size:1.5rem}.rbt-token{background-color:#e7f4ff;border:0;border-radius:.25rem;color:#007bff;display:inline-flex;line-height:1rem;margin:1px 3px 2px 0}.rbt-token .rbt-token-label{padding:.25rem .5rem}.rbt-token .rbt-token-label:not(:last-child){padding-right:.25rem}.rbt-token-disabled{background-color:rgba(0,0,0,.1);color:#495057;pointer-events:none}.rbt-token-removeable{cursor:pointer}.rbt-token-active{background-color:#007bff;color:#fff;outline:none;text-decoration:none}.rbt-token .rbt-token-remove-button{background-image:none;border-bottom-left-radius:0;border-top-left-radius:0;box-shadow:none;color:inherit;display:flex;font-size:inherit;font-weight:400;justify-content:center;opacity:1;outline:none;padding:.25rem .5rem .25rem 0;text-shadow:none}.rbt-token .rbt-token-remove-button .rbt-close-content{display:block}.rbt-aux{align-items:center;bottom:0;display:flex;justify-content:center;pointer-events:none;position:absolute;right:0;top:0;width:2rem}.rbt-aux-lg{width:3rem}.rbt-aux .rbt-close{margin-top:-.25rem;pointer-events:auto}.has-aux .form-control{padding-right:2rem}.has-aux .form-control.is-invalid,.has-aux .form-control.is-valid{background-position:right 2rem center;padding-right:4rem}.rbt-highlight-text{background-color:inherit;color:inherit;font-weight:700;padding:0}.input-group>.rbt{flex:1}.input-group>.rbt .rbt-aux,.input-group>.rbt .rbt-input-hint{z-index:5}.input-group>.rbt:not(:first-child) .form-control{border-bottom-left-radius:0;border-top-left-radius:0}.input-group>.rbt:not(:last-child) .form-control{border-bottom-right-radius:0;border-top-right-radius:0}.modern-phone-input{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;max-width:400px;position:relative;width:100%}.phone-input-wrapper{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.1);display:flex;overflow:hidden;transition:all .2s ease}.phone-input-wrapper:hover{border-color:#d1d5db;box-shadow:0 4px 12px rgba(0,0,0,.1)}.phone-input-wrapper.focused{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1),0 4px 12px rgba(0,0,0,.1)}.phone-input-wrapper.error{border-color:#ef4444}.phone-input-wrapper.error.focused{box-shadow:0 0 0 3px rgba(239,68,68,.1),0 4px 12px rgba(0,0,0,.1)}.phone-input-wrapper.disabled{background:#f9fafb;border-color:#e5e7eb;cursor:not-allowed;opacity:.6}.country-selector-section{border-right:1px solid #e5e7eb;flex-shrink:0;position:relative}.selected-country-display{align-items:center;background:#f8fafc;cursor:pointer;display:flex;gap:8px;min-width:120px;padding:16px 12px 16px 16px;transition:background-color .2s ease}.selected-country-display:hover{background:#f1f5f9}.country-flag{border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.1);height:18px;object-fit:cover;width:24px}.country-code{color:#374151;font-size:16px;font-weight:500;letter-spacing:.5px}.dropdown-arrow{color:#6b7280;height:16px;margin-left:auto;transition:transform .2s ease;width:16px}.phone-input-wrapper.focused .dropdown-arrow{transform:rotate(180deg)}.typeahead-container{left:0;margin-top:4px;position:absolute;right:0;top:100%;z-index:1000}.typeahead-container .rbt{width:100%}.typeahead-container .rbt-input-main{background:#fff;border:2px solid #e5e7eb;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);font-size:16px;padding:12px 16px;transition:all .2s ease}.typeahead-container .rbt-input-main:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1),0 4px 12px rgba(0,0,0,.1);outline:none}.typeahead-container .rbt-menu{background:#fff;border:2px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.15);margin-top:4px;max-height:280px;overflow-y:auto}.typeahead-container .rbt-menu::-webkit-scrollbar{width:6px}.typeahead-container .rbt-menu::-webkit-scrollbar-track{background:#f1f3f4;border-radius:3px}.typeahead-container .rbt-menu::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.typeahead-container .rbt-menu::-webkit-scrollbar-thumb:hover{background:#9ca3af}.country-option{transition:background-color .2s ease}.typeaheadMenu .dropdown-item.active{background:#3b82f6;color:#fff}.country-option .country-flag{border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.1)}.country-details{display:flex;flex-direction:column;flex-grow:1;gap:2px}.country-name{color:#374151;font-size:15px;font-weight:500;line-height:1.2}.country-code{color:#6b7280;font-size:13px;font-weight:400}.phone-input-section{align-items:center;display:flex}.phone-number-input{font-weight:400;letter-spacing:.5px;padding:16px 20px}.phone-number-input::placeholder{font-weight:400}.phone-number-input:disabled{color:#9ca3af;cursor:not-allowed}.error-message{align-items:center;display:flex;font-weight:500;gap:6px}.error-icon{flex-shrink:0;height:16px;width:16px}.success-message{align-items:center;color:#10b981;display:flex;font-size:14px;font-weight:500;gap:6px;margin-top:8px}@media (max-width:768px){.modern-phone-input{max-width:100%}.phone-input-wrapper{align-items:stretch;flex-direction:column}.country-selector-section{border-bottom:1px solid #e5e7eb;border-right:none}.selected-country-display{justify-content:space-between;min-width:auto;padding:14px 16px}.phone-number-input{padding:14px 16px}.typeahead-container{bottom:auto;left:16px;position:fixed;right:16px;top:auto;z-index:9999}}.phone-input-wrapper.focused .selected-country-display{background:#eff6ff}.phone-input-wrapper.focused .country-code{.modern-phone-input{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;max-width:400px;position:relative;width:100%}.phone-input-wrapper{align-items:center;background:#fff;border:2px solid #e5e7eb;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.1);display:flex;overflow:hidden;transition:all .2s ease}.phone-input-wrapper:hover{border-color:#d1d5db;box-shadow:0 4px 12px rgba(0,0,0,.1)}.phone-input-wrapper.focused{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1),0 4px 12px rgba(0,0,0,.1)}.phone-input-wrapper.error{border-color:#ef4444}.phone-input-wrapper.error.focused{box-shadow:0 0 0 3px rgba(239,68,68,.1),0 4px 12px rgba(0,0,0,.1)}.phone-input-wrapper.disabled{background:#f9fafb;border-color:#e5e7eb;cursor:not-allowed;opacity:.6}.country-selector-section{border-right:1px solid #e5e7eb;flex-shrink:0;position:relative}.selected-country-display{align-items:center;background:#f8fafc;cursor:pointer;display:flex;gap:8px;min-width:120px;padding:16px 12px 16px 16px;transition:background-color .2s ease}.selected-country-display:hover{background:#f1f5f9}.country-flag{border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.1);height:18px;object-fit:cover;width:24px}.country-code{color:#374151;font-size:16px;font-weight:500;letter-spacing:.5px}.dropdown-arrow{color:#6b7280;height:16px;margin-left:auto;transition:transform .2s ease;width:16px}.phone-input-wrapper.focused .dropdown-arrow{transform:rotate(180deg)}.typeahead-container{left:0;margin-top:4px;position:absolute;right:0;top:100%;z-index:1000}.typeahead-container .rbt{width:100%}.typeahead-container .rbt-input-main{background:#fff;border:2px solid #e5e7eb;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.1);font-size:16px;padding:12px 16px;transition:all .2s ease}.typeahead-container .rbt-input-main:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1),0 4px 12px rgba(0,0,0,.1);outline:none}.typeahead-container .rbt-menu{background:#fff;border:2px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 25px rgba(0,0,0,.15);margin-top:4px;max-height:280px;overflow-y:auto}.typeahead-container .rbt-menu::-webkit-scrollbar{width:6px}.typeahead-container .rbt-menu::-webkit-scrollbar-track{background:#f1f3f4;border-radius:3px}.typeahead-container .rbt-menu::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:3px}.typeahead-container .rbt-menu::-webkit-scrollbar-thumb:hover{background:#9ca3af}.country-option{align-items:center;cursor:pointer;display:flex;gap:12px;padding:12px 16px;transition:background-color .2s ease}.country-option:hover{background:#f8fafc}.typeaheadMenu .dropdown-item.active{background:#3b82f6;color:#fff}.country-option .country-flag{border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.1);flex-shrink:0;height:18px;object-fit:cover;width:24px}.country-details{display:flex;flex-direction:column;flex-grow:1;gap:2px}.country-name{color:#374151;font-size:15px;font-weight:500;line-height:1.2}.country-code{color:#6b7280;font-size:13px;font-weight:400}.phone-input-section{align-items:center;display:flex;flex:1}.phone-number-input{background:transparent;border:none;color:#374151;font-size:16px;font-weight:400;letter-spacing:.5px;outline:none;padding:16px 20px;width:100%}.phone-number-input::placeholder{color:#9ca3af;font-weight:400}.phone-number-input:disabled{color:#9ca3af;cursor:not-allowed}.error-message{align-items:center;color:#ef4444;display:flex;font-size:14px;font-weight:500;gap:6px;margin-top:8px}.error-icon{flex-shrink:0;height:16px;width:16px}.success-message{align-items:center;color:#10b981;display:flex;font-size:14px;font-weight:500;gap:6px;margin-top:8px}@media (max-width:768px){.modern-phone-input{max-width:100%}.phone-input-wrapper{align-items:stretch;flex-direction:column}.country-selector-section{border-bottom:1px solid #e5e7eb;border-right:none}.selected-country-display{justify-content:space-between;min-width:auto;padding:14px 16px}.phone-number-input{padding:14px 16px}.typeahead-container{bottom:auto;left:16px;position:fixed;right:16px;top:auto;z-index:9999}}.phone-input-wrapper.focused .selected-country-display{background:#eff6ff}.phone-input-wrapper.focused .country-code{color:#3b82f6}.rbt-input-main{font-family:inherit}.rbt-menu .dropdown-item{border-bottom:1px solid #f1f5f9}.rbt-menu .dropdown-item:last-child{border-bottom:none}.rbt-menu .dropdown-item.active,.rbt-menu .dropdown-item:active{background-color:#3b82f6;color:#fff}.rbt-menu .dropdown-item.active .country-name,.rbt-menu .dropdown-item:active .country-name{color:#fff}.rbt-menu .dropdown-item.active .country-code,.rbt-menu .dropdown-item:active .country-code{color:#e5e7eb}.typeahead-container{animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media (prefers-contrast:high){.phone-input-wrapper{border-width:3px}.country-option:hover{background:#e5e7eb}}background-color:#fff;border-color:#3b82f6;box-shadow:none;outline:none}.rbt-input-main:hover{background-color:#fff;border-color:#9ca3af}.rbt-input-main::placeholder{color:#9ca3af;font-weight:400;text-align:center}.is-invalid,.is-invalid:focus{border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.1)}.is-valid,.is-valid:focus{border-color:#10b981;box-shadow:0 0 0 3px rgba(16,185,129,.1)}.fv-plugins-message-container{margin-top:6px}.fv-help-block{align-items:center;color:#ef4444;display:flex;font-size:12px;font-weight:500;gap:4px}.fv-help-block:before{content:"⚠";font-size:12px}.required:after{color:#ef4444;content:"*";font-size:inherit;font-weight:600;padding-left:4px;position:relative}.w-20px{width:20px}.h-20px,.w-20px{height:20px}.w-100{width:100%}.me-2{margin-right:8px}.rounded-circle{border-radius:50%}.rbt-menu{background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.05);margin-top:2px;max-height:var(--dropdown-height,280px);min-width:var(--dropdown-width,200px);overflow:hidden;overflow-y:auto;z-index:1000}.rbt-menu-item{align-items:center;background-color:#fff;border-bottom:1px solid #f3f4f6;color:#374151;cursor:pointer;display:flex;font-size:14px;font-weight:400;gap:12px;min-height:44px;padding:12px 16px;transition:all .15s ease-in-out}.rbt-menu-item:last-child{border-bottom:none}.rbt-menu-item.active,.rbt-menu-item:focus,.rbt-menu-item:hover{background:#f3f4f6;color:#374151}.rbt-menu-item img{border:1px solid #e5e7eb;border-radius:4px;flex-shrink:0;height:24px;object-fit:cover;transition:all .15s ease-in-out;width:24px}.country-code{color:#374151;min-width:50px}.country-code,.country-name{font-size:14px;font-weight:400}.country-name{color:#6b7280;margin-left:auto}.rbt-input-group,.rbt-input-wrapper{align-items:center;display:flex}.rbt-input-wrapper{position:relative;width:100%}.rbt-input-wrapper:after{background:#fff;color:#6b7280;content:"▼";font-size:12px;padding:2px;pointer-events:none;position:absolute;right:8px;top:50%;transform:translateY(-50%);transition:all .2s ease-in-out;z-index:10}.rbt-input-wrapper.rbt-input-focus:after,.rbt-menu-open .rbt-input-wrapper:after{color:#3b82f6;transform:translateY(-50%) rotate(180deg)}.rbt-input-wrapper:before{display:none}.phone-input-number .form-control{border-left:none;border-radius:0 8px 8px 0;padding-left:16px}.phone-input-number .form-control:focus{border-left:1px solid #3b82f6}.rbt-menu::-webkit-scrollbar{width:8px}.rbt-menu::-webkit-scrollbar-track{background:#f1f3f4;border-radius:4px}.rbt-menu::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:4px}.rbt-menu::-webkit-scrollbar-thumb:hover{background:#9ca3af}.rbt-close{background:#ef4444;border:none;border-radius:50%;color:#fff;font-size:12px;height:18px;padding:0;transition:all .15s ease-in-out;width:18px}.rbt-close:hover{background:#dc2626;transform:scale(1.1)}.rbt-input-group{position:relative}.rbt-input-group,.rbt-input-wrapper{background-color:#fff}@media (max-width:640px){.d-flex{flex-direction:column;gap:12px}.phone-input-country,.phone-input-number{max-width:100%;min-width:100%;width:100%}.form-control,.rbt-input-main{font-size:16px;height:var(--input-height-mobile,52px);padding:14px 16px}}.rbt-loader{animation:spin 1s linear infinite;border:2px solid #e5e7eb;border-radius:50%;border-top-color:#3b82f6;height:16px;width:16px}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.form-control:focus-visible,.rbt-input-main:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}*{color-scheme:light}.rbt,.rbt *{background-color:#fff}.phone-input-wrapper{overflow:visible}.modern-phone-input{position:relative}.country-selector-container{position:relative}.country-selector-button{align-items:center;background:transparent;border:none;cursor:pointer;display:flex;height:100%;min-width:120px;padding:14px 16px;transition:all .2s ease}.country-selector-button.open,.country-selector-button:hover{background:rgba(59,130,246,.05)}.country-selector-button.open .dropdown-arrow{transform:rotate(180deg)}.country-selector-button:disabled{cursor:not-allowed;opacity:.6}.country-dropdown-menu{animation:dropdownSlideIn .15s ease-out;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);display:block;left:0;max-width:100%;min-width:320px;opacity:1;overflow:hidden;position:absolute;right:0;top:calc(100% + 4px);transform:none;visibility:visible;z-index:9999}@keyframes dropdownSlideIn{0%{opacity:0;transform:translateY(-8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.country-search-container{background:#fff;border-bottom:1px solid #f3f4f6;border-radius:8px 8px 0 0;padding:8px 12px}.country-search-input{background:#fff;border:1px solid #e5e7eb;border-radius:6px;box-sizing:border-box;font-size:14px;outline:none;padding:8px 12px;transition:border-color .2s ease;width:100%}.country-search-input:focus{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.1)}.country-search-input::placeholder{color:#9ca3af}.countries-list{background:#fff;display:block;max-height:250px;overflow-y:auto;padding:4px 0}.country-option{align-items:center;border-bottom:1px solid #f3f4f6;cursor:pointer;display:flex;gap:12px;padding:12px 16px;transition:background .15s ease}.country-option:hover{background:#f8fafc}.country-option.selected{background:#f0f9ff}.country-option:last-child{border-bottom:none}.country-option .country-flag{border:1px solid #e5e7eb;border-radius:3px;flex-shrink:0;height:18px;object-fit:cover;width:24px}.country-option .country-details{align-items:center;display:flex;flex:1;gap:12px}.country-option .country-code{color:#6b7280;font-size:13px;font-weight:400;line-height:1.2;min-width:80px;text-align:left}.country-option .country-name{color:#1f2937;flex:1;font-size:15px;font-weight:500;line-height:1.2;text-align:left}.no-results{color:#9ca3af;font-size:14px;font-style:italic;padding:20px;text-align:center}.search-highlight{background:#fef3c7;border-radius:2px;color:#92400e;font-weight:600;padding:1px 2px}.country-option:hover .search-highlight{background:#fbbf24;color:#78350f}.countries-list::-webkit-scrollbar{width:6px}.countries-list::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}.countries-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.countries-list::-webkit-scrollbar-thumb:hover{background:#94a3b8}.phone-input-section{flex:1}.phone-number-input{background:transparent;border:none;color:#374151;font-size:16px;outline:none;padding:16px;width:100%}.phone-number-input::placeholder{color:#9ca3af}.phone-input-label{color:#374151;display:block;font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ef4444}.error-message{color:#ef4444;font-size:14px;margin-top:8px}.country-option .country-details{align-items:center;display:flex;flex:1;flex-direction:row;gap:12px}.country-option .country-code{color:#6b7280;font-size:13px;font-weight:400;line-height:1.2;min-width:80px;text-align:left!important}.country-option .country-name{color:#1f2937;flex:1;font-size:15px;font-weight:500;line-height:1.2;text-align:left!important}@media (max-width:480px){.country-dropdown-menu{bottom:auto;left:8px;max-height:60vh;min-width:auto;position:fixed;right:8px;top:auto;z-index:9999}.countries-list{max-height:calc(60vh - 60px)}.country-search-input{font-size:16px}}