Skip to content

UI Experiments: Form elements/components to be used when generating a form

Run experiments on:

  • Basic Inputs (variants: Text,Email,Password)
  • Form Buttons (variants: Submit,Cancel)
  • Date Inputs (variants: Date,DateTime,DateRange,DateTimeRange)
  • Check Grouped Inputs (variants: SingleCheckbox, MultipleCheckbox)
  • Radio Grouped Inputs (variants: SingleRadio, MultipleRadio)
  • Ranged Inputs (variants: Slider, SteppedSlider)
  • Boolean Inputs (variants: Regular, BooleanSlider)
  • Select/Dropdown Inputs (variants: Static, Dynamic)

@stephen These are the UI Form Components that will be used to auto-generate forms.Ensure the following criteria is met for each component:

  • Must be functional components only with no app logic.
  • As the lowest ordered components, they must avoid all unnecessary re-renders (e.g no lifecycle methods)
  • Must handle the common states of a form element component(states = loading | error | nullValue | disabled)
  • No external styling allowed with only Chakra-UI and the custom theme allowed. Use the JSX attributes available for extra customization.
  • Must be responsive for any screen size. Chakra-UI can handle multiple settings for most of the JSX attributes
Edited by Stephen