Skip to main content

📝 Forms & Inputs

The Forms & Inputs category includes all the necessary elements for creating interactive forms within your application. These components facilitate user data entry and interaction.

Available Components:​

  • Text Field
  • Search Bar
  • Dropdown
  • Text Area
  • Toggle
  • Checkbox
  • Radio Button
  • Counter
  • Image Picker
  • Range Slider
  • Stars Rating

Text Field​

A versatile component for user input, the Text Field allows users to enter single-line text with ease. It supports placeholder text, input validation, and various customization options for fonts, colors, and borders, making it ideal for forms and login screens.

  1. Add the Text Field:
    • Drag and drop the Text Field onto the Canvas.
    • Place the text field in the desired location and adjust its size using percentage values or by dragging its edges.
  2. Set and Customize:
    • Left Toolbar:
      • Edit Label: Double-click on the label area to modify the label text.
      • Change Placeholder: Double-click on the text field area to update the placeholder text.
      • Choose Input Type: Select the type of input (Text, Email, Password, Number).
      • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Right Toolbar:
      • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Designed for quick and efficient querying, the Search Bar component lets users search through content or data. It features real-time suggestions, clear icons, and adjustable styling for responsiveness, ensuring a smooth search experience on any device.

  1. Add the Search Bar:
    • Drag and drop the Search Bar onto the Canvas.
    • Place the search bar where desired and adjust its size accordingly.
  2. Set and Customize:
    • Left Toolbar:
      • Change Icon: Select and customize the search icon.
      • Edit Placeholder: Modify the placeholder text within the search bar.
      • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Right Toolbar:
      • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

The Dropdown component provides a compact way to display a list of options. Users can select a single choice from a collapsible menu, and it supports customizable animations, styling, and multi-level nesting for more complex selections.

  1. Add the Dropdown:
    • Drag and drop the Dropdown component onto the Canvas.
    • Place the dropdown in the desired location and adjust its size as needed.
  2. Set and Customize:
    • Left Toolbar:
      • Edit Label: Double-click on the label area to modify the label text.
      • Set Default State: Choose whether the dropdown is enabled or disabled by default.
      • Add Select Options:
        • Click on "Add Select Option" to add multiple options.
        • Define the Value and Label for each option.
      • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Right Toolbar:
      • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Text Area​

Ideal for longer text inputs, the Text Area component offers a multi-line input space. It includes features like adjustable height, character limits, and scroll functionality, and it can be styled to match any form or content area design.

  1. Add the Text Area:
    • Drag and drop the Text Area component onto the Canvas.
    • Place the text area where desired and adjust its size accordingly.
  2. Set and Customize:
    • Left Toolbar:
      • Edit Label: Double-click on the label area to modify the label text.
      • Change Placeholder: Modify the placeholder text within the text area.
      • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Right Toolbar:

      • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.

      • Refer to the Customization Guide for detailed instructions.

tip

The settings available in the right toolbar may vary depending on the selected component type.

Toggle​

The Toggle component allows users to switch between two states (e.g., on/off). With smooth animations and customizable colors, it’s perfect for settings and preferences, providing clear visual feedback on the current state.

  1. Add the Toggle:
    • Drag and drop the Toggle component onto the Canvas.
    • Place the toggle in the desired location and adjust its size as needed.
  2. Set and Customize:
    • Left Toolbar:
      • Set Default State: Choose whether the toggle is enabled or disabled by default.
      • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Right Toolbar:
      • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Checkbox​

For scenarios where multiple selections are needed, the Checkbox component is the go-to option. It offers customizable size, color, and label options, along with clear check/uncheck states to ensure accurate user selections.

  1. Add the Checkbox:
    • Drag and drop the Checkbox component onto the Canvas.
    • Place the checkbox where desired and adjust its size accordingly.
  2. Set and Customize:
    • Left Toolbar:
      • Edit Label: Double-click on the label area to modify the label text.
      • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Right Toolbar:
      • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Radio Button​

The Radio Button component enables users to choose one option from a set of mutually exclusive choices. It’s optimized for clarity and ease-of-use, with customizable indicators and grouping capabilities to fit a variety of form designs.

  1. Add the Radio Button:
    • Drag and drop the Radio Button component onto the Canvas.
    • Place the radio button in the desired location and adjust its size as needed.
  2. Set and Customize:
    • Left Toolbar:
      • Add Select Options:
        • Click on "Add Select Option" to add multiple options.
        • Define the Value and Label for each option.
      • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Right Toolbar:
      • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Counter​

The Counter component lets users increment or decrement numerical values with a simple click or tap. Featuring adjustable step values, limits, and clear visual indicators, it’s perfect for quantity selections in shopping carts or form inputs.

  1. Add the Counter:
    • Drag and drop the Counter component onto the Canvas.
    • Place the counter where desired and adjust its size accordingly.
  2. Set and Customize:
    • Left Toolbar:
      • Allow Negative Numbers: Toggle the option to enable or disable negative numbers.
      • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Right Toolbar:
      • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Image Picker​

Designed for visual content selection, the Image Picker component allows users to upload or choose images from a gallery.

  1. Add the Image Picker:
    • Drag and drop the Image Picker component onto the Canvas.
    • Place the image picker where desired and adjust its size accordingly.
  2. Set and Customize:
    • Left Toolbar:
      • Preview Image Toggle: Enable or disable image preview after upload.
      • Edit Placeholder: Modify the placeholder text within the image picker.
      • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
      • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.
    • Right Toolbar:
      • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
      • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Range Slider​

The Range Slider component allows users to select a value within a specified range by dragging a slider. This is particularly useful for settings that require a numeric value to be selected, such as volume, brightness, price, or any other setting with a range. It also supports dual handles for selecting a range of values (e.g., minimum and maximum values).

  1. Add the Range Slider:
    • Drag and drop the Range Slider component onto the Canvas.
    • Place the image picker where desired and adjust its size accordingly.
  2. Set and Customize:

  • Left Toolbar:

    • Minimum & Maximum Values: In the settings panel, define the Minimum Value and Maximum Value for the range. By default, the range is set from 0 to 100, but you can adjust these values as needed.
    • Step Value: The Step field defines the increment between values. For example, if set to 1, users can select values in increments of 1, but if set to 5, the slider will jump in increments of 5.
    • Enable Range Slider: Turn on the Enable Range Slider toggle to activate the component. If enabled, users will be able to interact with the slider to adjust values.
    • Default Value: Set the Default Value to specify where the slider should initially start.
    • Default Start & End Values: For a dual-range slider, set the Default Start Value and Default End Value to define the initial range. This is useful when you need users to select a range (e.g., from 20 to 80).
    • Show Labels: Turn on the Show Labels option to display the values at each end of the slider, providing users with a clearer understanding of the range.
    • Show Tooltip: Enable the Show Tooltip option to display a tooltip showing the current value as users drag the slider.
    • Disabled: Use the Disabled toggle if you want to disable the slider (for example, when the user is not allowed to change the value at a given time).
    • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
    • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.

  • Right Toolbar:

    • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
    • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Stars Rating​

The Stars Rating component is used to collect user feedback through a visual representation of stars. This component is ideal for rating systems, where users can rate products, services, or other items based on a star system. You can customize the total number of stars, the number of pre-filled stars, and whether users can select half stars..

1. Adding the Stars Rating Component

  1. Drag & Drop: Locate the Stars Rating component under Forms & Inputs in the component library and drag it to your app canvas.
  2. Position the Component: Place the Stars Rating component where you need it within your form or interface.

2. Set and Customize:

  • Left Toolbar:

    • Total Stars: In the settings panel, choose the Total Stars value (the maximum number of stars in the rating).
    • Filled on Start: Define how many stars will be pre-filled when the component first loads. This could represent the initial rating that you might retrieve from a database.
    • Allow Half Stars: Enable the Allow Half Stars toggle if you want users to be able to select half stars (e.g., 4.5 stars).
    • Editable: Ensure that the Editable toggle is turned on if you want users to interact with the rating system and modify the value.
    • Add Action: Select “Add Action” to specify what happens when users tap or click on the component (e.g., navigate to a new page, open a modal, etc.).
    • Set Styles for Specific Screen Sizes: Adjust and preview styles for mobile, tablet, or desktop so the text looks great on any screen size.

  • Right Toolbar:

    • Utilize all available customization features, such as font type, weight, size, color, alignment, border, shadow and etc.
    • Refer to the Customization Guide for detailed instructions.
tip

The settings available in the right toolbar may vary depending on the selected component type.

Quick Tips​

  1. Consistent Design: Use uniform styles and layouts across all form components to maintain a cohesive look.
  2. Clear Labels & Placeholders: Ensure labels and placeholders are concise and descriptive for better user understanding.
  3. Responsive Adjustments: Customize styles for different devices to guarantee a smooth experience on mobile, tablet, and desktop.
  4. Input Validation: Implement validation rules to ensure data integrity and provide instant feedback to users.
  5. Accessible Components: Optimize forms with proper ARIA labels and keyboard navigation to support all users.
  6. Actionable Interactions: Leverage the “Add Action” feature to create meaningful interactions and guide user flow.

Need Assistance?​

If you encounter any challenges or require further guidance while building your app, please refer to the Documentation or, contact our support team at [email protected].