I can see your budget selection form! When a user clicks "Custom" on the Total Budget, you need a way for them to input their own amount. Let me generate design inspiration for the best UX approach.
Based on the design inspiration and your budget form, here's what should happen when a user clicks "Custom":
When the user clicks the "Custom" button, the budget selection area should:
Option 1: Replace with Input Field (Most Efficient)
Option 2: Slide-in Input Field
Option 3: Modal Dialog
Would you like me to implement one of these approaches? I can also show you how to code it with state management and validation. Which option appeals to you most, or do you have a different interaction in mind?
Now I'll create three beautiful design variations for the custom budget input. Each will showcase a different interaction pattern:
I've created three beautiful design variations for your custom budget input:
When "Custom" is clicked, the preset buttons hide and a focused input field appears with a "Set" button. Clean and minimal, perfect for quick entries.
A smooth animated panel slides in below the buttons when "Custom" is toggled. Users can still see all budget options. Features a chevron icon that rotates to indicate state, with a green accent color.
Clicking "Custom" opens a centered modal dialog with a larger input field, separate "Cancel" and "Confirm" buttons, and clear messaging. Provides the most focus and validation feedback.
Each design is fully interactive—try clicking the "Custom" button in each card to see how it works! All three include proper date input fields and the validation message. Which style resonates most with your app's design?
You can send messages while the preview loads