11 days ago
Design a responsive and accessible form component for setting up conditional price adjustments in a smart contract builder. Use the attached screenshot as a visual reference, but apply the following refinements and UX improvements: 🧩 Section: “Price Adjustment” 1. Condition Trigger (top of the form): Label: “Should this condition trigger an outcome?” Include a checkbox: “Is the parameter approved?” → Options: Yes / No Behavior: If “No,” trigger a selected outcome. Below the checkbox, include a short text input field labeled: → “Describe how approval is determined” (e.g., “Score above 80 = approved, under 80 = not approved”) 2. Adjustment Basis (radio buttons or toggles): Percentage of contract value (%) Fixed fee (in €) Add helper text under each option: Fixed fee: “A specific, unchanging amount (e.g., €100)” Percentage: “Calculated from total contract value (e.g., 10% of €1000 = €100)” 3. Adjustment Type (dropdown or radio buttons): Discount Surcharge 4. Outcome Type (radio buttons or toggle): Positive (Reward) Negative (Penalty) 5. Affected Party (dropdown): Renter Owner 6. Explanation (optional text field): Label: “Reason or additional notes” Placeholder: “E.g., Discount applied for eco-driving” ✨ Design guidelines: Use Tailwind-style layout Fully mobile responsive Keyboard-navigable and screen-reader friendly Clear labels and hierarchy Use accessible components for all inputs
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs
Start building stunning tailwind UIs!Â
