Form Frenzy to Form Framework

Forms are at the core of many user experiences—from onboarding to payments—but building scalable, and reusable form UIs comes with unique challenges.

In this talk, I’ll take you behind the scenes of our journey from repeatedly rebuilding similar form screens, it's business layer to building a reusable form architecture that balances dynamic UI rendering, validation, and state management effectively.

Through real-world implementation details, we’ll discuss:
• Our Journey with Forms & Why We Built This
•⁠ How we built a Dynamic Form System with Compose
•⁠ ⁠State Management & UDF in Forms: Balancing immutability, Compose state holders, and Flow for efficient reactivity.
•⁠ Validation & Navigation: Ensuring a seamless user experience with dynamic validation & navigation.
•⁠ ⁠Extensibility & Reusability: How to allow different teams to swap out repositories while using shared UI & logic to build their form UI
•⁠ ⁠Lessons Learned: Performance optimisations, API design pitfalls, and Compose-specific challenges.

By the end of this talk, you’ll have a blueprint for designing a scalable, reusable form system—one that makes it easier to build forms that are composable, testable, and adaptable to different use cases. 🚀

Transcript

1. Akshay Chordiya Welcome to FormKit 📝🤖
2. • Turn repeated thing into a reusable system • Build a dynamic form architecture with Compose • Share learnings which you can use 🗺 🎯 Goal of the talk
3. Story time 📖🧚
4. 💥
10. UI Reusable components
11. Reusable components Validator Navigation Analytics UI
12. ~3 days Implementing each screen Validator Navigation Analytics UI
13. We took a step back 🤔
14. We took a step back 🤔
15. • A screen or a sheet which shows • Questions • Static Information What is a Form 📝
24. Building blocks 🧩
25. FormContent FormHeader FormQuestion Building blocks 🧩 FormQuestion FormElement
26. Building blocks 🧩 FormElement FormQuestion FormSheet
27. Building blocks 🧩 FormElement
28. Building blocks 🧩 FormElement
29. Building blocks 🧩 FormQuestion
30. Building blocks 🧩 FormQuestion
31. Building blocks 🧩 FormQuestion Validation
32. Building blocks 🧩 FormQuestion Validation
33. 👔 Stakeholder buy-in
34. • - BE driven UI = A wild ride 🎢 • + Reusable UI components 🤡 • + Proposed an engine to create entire Form flows quickly ⚡ 👔 Stakeholder buy-in
35. 👔 Stakeholder buy-in Team Screen 1 Screen 2 Screen 3
36. 👔 Stakeholder buy-in Rest of team FormKit engineer Proposal Screen 1 Screen 2 Screen 3 MVP 🔮
37. 👔 Stakeholder buy-in Rest of team Screen 1 Screen 2 Screen 3 Proposal MVP FormKit engineer
38. Buy-in 🪙✅
39. How does it work? 🧠
40. Blocks 🧱 FormContent FormHeader FormQuestion FormQuestion FormElement
41. Blocks 🧱 FormContent FormQuestion FormQuestion FormElement Form
42. Blocks 🧱 FormContent FormQuestion FormQuestion FormElement Form Model Composable
43. Blocks 🧱 FormContent FormQuestion FormQuestion FormElement Form
44. Blocks 🧱 interface FormElement { val id: String var visibility: Visibility } FormContent Form FormElement
45. Blocks 🧱 interface FormElement { val id: String var visibility: Visibility } interface FormQuestion<T : FormAnswer> : FormElement { var answer: T? val isOptional: Boolean var showError: Boolean fun validate() } FormContent FormElement Form FormQuestion FormQuestion
46. Blocks 🧱 class FreeText( val title: String? = null, override val isOptional: Boolean = false, ) : FormQuestion<FormAnswer.FreeText> { override var answer by mutableStateOf(FormAnswer.FreeText("")) override var showError by mutableStateOf(false) override fun validate() { val text = answer?.text.orEmpty() showError = text.isNullOrBlank() } }
47. Blocks 🧱 class FreeText( val title: String? = null, override val isOptional: Boolean = false, ) : FormQuestion<FormAnswer.FreeText> { override var answer by mutableStateOf(FormAnswer.FreeText("")) override var showError by mutableStateOf(false) override fun validate() { val text = answer?.text.orEmpty() showError = text.isNullOrBlank() } }
48. Blocks 🧱 class FreeText( val title: String? = null, override val isOptional: Boolean = false, ) : FormQuestion<FormAnswer.FreeText> { override var answer by mutableStateOf(FormAnswer.FreeText("")) override var showError by mutableStateOf(false) override fun validate() { val text = answer?.text.orEmpty() showError = text.isNullOrBlank() } }
49. Blocks 🧱 class FreeText( val title: String? = null, override val isOptional: Boolean = false, ) : FormQuestion<FormAnswer.FreeText> { override var answer by mutableStateOf(FormAnswer.FreeText("")) override var showError by mutableStateOf(false) override fun validate() { val text = answer?.text.orEmpty() showError = text.isNullOrBlank() } }
50. Blocks 🧱 class FreeText( val title: String? = null, override val isOptional: Boolean = false, ) : FormQuestion<FormAnswer.FreeText> { override var answer by mutableStateOf(FormAnswer.FreeText("")) override var showError by mutableStateOf(false) override fun validate() { val text = answer?.text.orEmpty() showError = text.isNullOrBlank() } }
51. Blocks 🧱 @Composable fun FreeTextContent( state: FormQuestion.FreeText, onTextChanged: (String) -> Unit ) { TextField( label = state.label, value = state.answer?.text ?: "", onTextChanged = onTextChanged, hint = state.hint, isError = state.showError, ) }
52. Blocks 🧱 FormStepType.Form( title = question.title, description = question.markdownDescription, elements = listOf( FormQuestion.FreeText( id = DESCRIBE_DAMAGE, hint = “Enter what you hit”, ), .. ), primaryButtonText = "Next" )
53. Blocks 🧱 FormStepType.Form( title = question.title, description = question.markdownDescription, elements = listOf( FormQuestion.FreeText( id = DESCRIBE_DAMAGE, hint = “Enter what you hit”, ), .. ), primaryButtonText = "Next" )
54. Validator Navigator UI
55. Validator Navigator UI Reusable components ~
56. Navigator 🧭 interface FormNavigator { val currentScreen: StateFlow<FormScreen> val steps: List<FormScreen> fun goNext(onLastStep: () -> Unit) fun jumpTo(screen: FormScreen) fun goBack(onFirstStep: () -> Unit) }
57. interface FormNavigator { val currentScreen: StateFlow<FormScreen> val steps: List<FormScreen> fun goNext(onLastStep: () -> Unit) fun jumpTo(screen: FormScreen) fun goBack(onFirstStep: () -> Unit) } Navigator 🧭
58. interface FormNavigator { val currentScreen: StateFlow<FormScreen> val steps: List<FormScreen> fun goNext(onLastStep: () -> Unit) fun jumpTo(screen: FormScreen) fun goBack(onFirstStep: () -> Unit) } Navigator 🧭
59. interface FormNavigator { val currentScreen: StateFlow<FormScreen> val steps: List<FormScreen> fun goNext(onLastStep: () -> Unit) fun jumpTo(screen: FormScreen) fun goBack(onFirstStep: () -> Unit) } Navigator 🧭
60. Navigator 🧭 override fun goNext(onLastStep: () -> Unit) { if (currentStepIndex < steps.size - 1) { currentStepIndex++ } } override fun goBack(onFirstStep: () -> Unit) { if (currentStepIndex > 0) { currentStepIndex-- } }
61. Navigator 🧭 private val _currentScreen: MutableStateFlow<FormScreen> = MutableStateFlow() override val currentScreen: StateFlow<FormScreen> = _currentScreen.asStateFlow() private var currentStepIndex = 0 set(value) { field = value _currentScreen.value = steps[currentStepIndex] }
62. internal enum class VehicleDamageScreen : FormScreen { WasYourVehicleDamaged, DescribeYourVehicleDamage, LevelOfDamage, ExistingVehicleDamage, AreYouHappyWithApprovedRepairer, VehicleDamageSummary, } Navigator 🧭 Example
63. internal enum class VehicleDamageScreen : FormScreen { WasYourVehicleDamaged, DescribeYourVehicleDamage, LevelOfDamage, ExistingVehicleDamage, AreYouHappyWithApprovedRepairer, VehicleDamageSummary, } Navigator 🧭 Example
64. Validator Navigator UI
65. • Provides a common way to validate each question • Each question type provides it’s own validation logic Validator 👮
66. Validator 👮 class FreeText( val title: String? = null, override val isOptional: Boolean = false, ) : FormQuestion<FormAnswer.FreeText> { override var answer by mutableStateOf(FormAnswer.FreeText("")) override var showError by mutableStateOf(false) }
67. class FreeText( val title: String? = null, override val isOptional: Boolean = false, ) : FormQuestion<FormAnswer.FreeText> { override var answer by mutableStateOf(FormAnswer.FreeText("")) override var showError by mutableStateOf(false) override fun validate() { val text = answer?.text.orEmpty() showError = text.isNullOrBlank() } }
68. interface FormValidator { fun validate(form: FormStepType.Form): Boolean { val questions = form.elements.filterIsInstance<FormQuestion<*>>() return validate(questions) } }
69. interface FormValidator { fun validate(form: FormStepType.Form): Boolean { val questions = form.elements.filterIsInstance<FormQuestion<*>>() return validate(questions) } }
70. interface FormValidator { fun validate(form: FormStepType.Form): Boolean { val questions = form.elements.filterIsInstance<FormQuestion<*>>() return validate(questions) } fun validate(questions: List<FormQuestion<*>): Boolean { return questions .filter { it.isVisible && !it.isOptional } .onEach { it.validate() } .none { it.showError } } }
71. interface FormValidator { fun validate(form: FormStepType.Form): Boolean { val questions = form.elements.filterIsInstance<FormQuestion<*>>() return validate(questions) } fun validate(questions: List<FormQuestion<*>): Boolean { return questions .filter { it.isVisible && !it.isOptional } .onEach { it.validate() } .none { it.showError } } }
72. Validator Navigator UI
73. How does all this fit in 🧩
74. Architecture Diagram FormContent FormViewModel FormNavigator FormValidator
75. Architecture Diagram FormRepository FormNavHost FormViewModel FormNavigator FormValidator In- memory Backend
76. private fun mapDescribeVehicleDamage(response: Response): FormStepType.Form { return FormStepType.Form( title = response.title, description = response.description, elements = listOf( FormQuestion.FreeText( id = DESCRIBE_DAMAGE, hint = "Describe the damage" ) ), primaryButtonText = "Next" ) } Example
77. private fun mapDescribeVehicleDamage(response: Response): FormStepType.Form { return FormStepType.Form( title = response.title, description = response.description, elements = listOf( FormQuestion.FreeText( id = DESCRIBE_DAMAGE, hint = "Describe the damage" ) ), primaryButtonText = "Next" ) } Example
78. private fun mapDescribeVehicleDamage(response: Response): FormStepType.Form { return FormStepType.Form( title = response.title, description = response.description, elements = listOf( FormQuestion.FreeText( id = DESCRIBE_DAMAGE, hint = "Describe the damage" ) ), primaryButtonText = "Next" ) } Example
79. private fun mapDescribeVehicleDamage(response: Response): FormStepType.Form { return FormStepType.Form( title = response.title, description = response.description, elements = listOf( FormQuestion.FreeText( id = DESCRIBE_DAMAGE, hint = "Describe the damage" ) ), primaryButtonText = "Next" ) } Example
80. That’s it! 🎉 That single function powers an entire screen
81. All that is cool ✨ But give me numbers 🧮
82. ~1.4 days Implementing each screen w/ FormKit ‐
83. ~1 week Implementing entire form section (in most cases)
84. Takeaways 🥡
85. Takeaways 🥡 • Work with stakeholders to get buy-in 🎰 • Keep it MVP! 🐣 • Over-engineering vs natural progression 📈 • Blueprint to create your own form/UI framework 🗺 • KMP/Open Source [TBD]
86. Thank You 🙏 @Akshay_Chordiya