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":
Recommended Behavior: Inline Input Field
When the user clicks the "Custom" button, the budget selection area should:
- Show an input field where the user can type their custom amount
- Include a currency symbol ($) to clarify they're entering a dollar amount
- Provide clear validation - ensure the input accepts numeric values only
- Maintain visual consistency - keep the same styling as the preset buttons
- Enable dynamic feedback - show validation messages if needed (e.g., "Enter a valid amount")
Three Design Approaches:
Option 1: Replace with Input Field (Most Efficient)
- The Custom button itself becomes an active input field where users can type directly
- Clean and minimal, no extra UI elements
Option 2: Slide-in Input Field
- A smooth animation reveals an input field below or next to the budget buttons
- Users can still see their other budget options
Option 3: Modal Dialog
- A small popup appears with a larger input field and a "Confirm" button
- Good for more detailed custom budget entry with validation messages
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:
Option 1: Inline Input Replacement
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.
Option 2: Slide-in Input Field
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.
Option 3: Modal Dialog
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?