Standard Widgets

[jbpenrath]

Verna should embedded a set of standard widgets :

Form input widgets

• Checkbox control
  • Properties

    label: string
    help_message: string
    error_message: string
    required: boolean
    

  • Output
    • A checkbox input
• Radio control
  • Properties

    label: string
    help_message: string
    error_message: string
    required: boolean
    

  • Output
    • A radio input
• Drodown menu
  • Properties

    label: string
    help_message: string
    error_message: string
    required: boolean
    choices: string[]
    

  • Output
    • A select
• Multiple choice list
  • Properties

    label: string
    help_message: string
    error_message: string
    required:boolean
    choices: string[]
    

  • Output
    • A select with multiple attribute set to true.
      May be this widget could be merged with the Dropdown menu by adding a multiple: boolean property 🤔
• Text input
  • Properties

    label: string
    help_message: string
    error_message: string
    required:boolean
    placeholder: string
    min_length: number
    max_length: number
    pattern: string
    type: 'text' | 'tel' | 'email'
    

  • Output
    • A select
• Number input
  • Properties

    label: string
    help_message: string
    error_message: string
    required:boolean
    placeholder: string
    min_value: number
    max_value: number
    step: number
    

  • Output
    • A number or range input
• Date input
  • Properties

    label: string
    help_message: string
    error_message: string
    required:boolean
    placeholder: string
    min_value: number
    max_value: number
    step: number
    

  • Output
    • A date or datetime input
• Long text input
  • Properties

    label: string
    help_message: string
    error_message: string
    required:boolean
    placeholder: string
    min_length: number
    max_length: number
    

  • Output
    • A date or datetime input
• Image
  • Properties

    label: string
    help_message: string
    error_message: string
    required:boolean
    placeholder: string
    accept: 'image/png' | 'image/jpeg' | 'image/svg+xml'
    

  • Output
    • A custom file input with image preview
• Multiple Attached file
  • Properties

    label: string
    help_message: string
    error_message: string
    required:boolean
    placeholder: string
    accept: string
    

  • Output
    • A file input with uploaded file summary
      Maybe this widget could be merged with the Attached file widget by adding a multiple: boolean property 🤔
• Link
  • Properties

    label: string
    help_message: string
    error_message: string
    required:boolean
    placeholder: string
    min_length: number
    max_length: number
    pattern: string
    

  • Output
    • A url input
• Attached file
  • Properties

    label: string
    help_message: string
    error_message: string
    required:boolean
    placeholder: string
    accept: string
    

  • Output
    • A file input

Layout widgets

• Title
  • Properties
    • Value
    • Level (Range from 1 to 6)
  • Output
  • A heading element corresponding to the level defined.
• Paragraph
  • Properties
    • Value
  • Output
  • A paragraph element
• Separator
  • Output
  • A <hr/> element

Predefined widgets

Last but not least, we also need to be able to create predefined widgets with custom properties and/or inherit from standard widgets propertiers with some value enforced. e.g: We could image a firstname input which inherits from a text input but with following properties: ``` label: 'firstname' help_message: string error_message: string required:boolean placeholder: 'Type your firstname' min_length: 3 max_length: 50 type: 'text' ```