Feathery Docs
HomeCommunityGitHub
  • Platform
    • Quickstart
    • Form Fields
      • Hidden Fields
      • How to Set Field Values
      • Link Fields Across Forms
      • Custom Field Input Format
    • Build Forms
      • Elements
        • Basic
          • Container
          • Button
          • Text
          • Progress Bar
          • Image
          • PDF Viewer
          • Video
          • Table
          • Tooltip
        • Fields
          • Address
            • Street Address Line 1
            • Street Address Line 2
            • City
            • State
            • Country
            • Zip Code
          • Button Group
          • Checkbox
          • Checkbox Group
          • Color Picker
          • Combobox
          • Dropdown
          • Dropdown Multiselect
          • Date Selector
          • Time Selector
          • Email
          • File Upload
          • Matrix
          • Number
          • Password
          • Picture Choice
          • Pin Input
          • Phone Number
          • Radio Group
          • Rating
          • Signature
            • Legally Binding Signatures
          • Slider
          • Social Security Number
          • Text Area
          • Text Field
          • Payment Method
          • URL
        • Custom HTML, JS, CSS, and Iframes
        • Custom Fields
      • Design
        • Reuse styles and elements
          • Styling
          • Assets
        • Alignment and Spacing
        • Sizing Forms and Elements
        • Responsive Layouts
      • Actions
      • Logic
        • Navigate Steps Conditionally
        • Show Elements Conditionally
        • Custom Field Validation
        • Available Conditions
        • Display Dynamic Text
        • Dynamically Repeating Containers
      • Advanced Logic & API Connections
        • Visual Rule Builder
          • Connect to API Action
            • Salesforce API Connector
          • Set Field Value Action
          • Navigate Step Action
          • Set Field Error Action
          • Open URL Action
          • Set Calendly URL Action
        • Javascript Rule Builder
          • API Connections in Code
          • Trigger Integrations from Logic
          • Reusable Logic Configs
        • Examples
          • API Connectors
            • Dynamic dropdown options
            • Dynamic form navigation
            • Pre-fill form from Salesforce
            • Pre-fill form from Hubspot
            • Pre-fill field options from Google Sheets
            • Generate ChatGPT Message
          • Field Validation
            • Complex Field Validation
            • Date and Time Validations
          • Initialize Date Field
          • Dynamically set field placeholder
          • Randomize Field Option Order
          • Update field options based on previous selection
      • Integrations
        • Event Triggers
        • Examples
          • Upload Files to Google Drive
      • Dev & Staging Environments
    • Launch Forms
      • Embed Your Forms
      • Custom URLs & SEO
      • User Tracking
      • Completion Criteria
      • UTM Parameters
      • Accessibility Standards
      • Analytics
      • A/B Testing
      • Offline Mode
    • Document Intelligence
      • Review Extractions
      • Post Processing
      • Supported Document Types
      • Prompting Guide
      • Examples
        • Investment Report
    • Document Autofill & Signatures
      • Autofill Document Templates
        • PDF Autofill
        • Word Doc Autofill
          • Dynamic Tables
        • Excel Autofill
        • InDesign Autofill
      • Signature Workflows
        • Signature Notifications
        • Access Signed Documents
        • 21 CFR Part 11 Compliance
      • Export Form Submission PDF
    • Workflows
      • Collaboration
        • Email Invite
        • Start Directly
        • Anonymous Starts
      • Review, Edit & Approve
      • Unique Submission Links
    • Enterprise Compliance
      • Security and Privacy
      • Reliability and Performance
      • Document Management
      • Data Sovereignty
    • International Forms
      • Translate Forms
      • Right to Left (RTL) Support
      • International Form Fields
    • White Label Feathery
      • Build Custom Form Fields
      • Offer Custom Form Templates
      • Custom Dashboard Domain
    • Account Settings
      • Managing Your Team
      • Permissions and User Groups
      • Account Attributes
    • FAQs
      • Account & Billing
  • Guides
    • Verify Submissions & Prevent Spam
    • Build a Login or Verification Flow
      • Connect an Auth Integration
      • Add Auth Methods
        • Email SMS Code
        • Email Magic Link
        • Phone Number Verification
        • Social Logins
          • Google
          • Amazon
          • Apple
          • Bitbucket
          • Coinbase
          • Discord
          • Facebook
          • GitHub
          • GitLab
          • LinkedIn
          • Microsoft
          • Slack
          • Twitch
          • Twitter
      • (Optional) Require Auth for Onboarding Steps
      • (Optional) Add Login Flow to Your Site
        • Feathery-Hosted (Recommended)
        • Embed Login Flow
          • Login Embed Tutorial
    • Build a Payment Flow
      • Connect to Stripe
      • Select Products or Plans
      • Collect Payment Method
      • Purchase Products
    • Send Custom SMS Messages
    • Salesforce Picklist Options
  • Developers
    • React SDK
      • API Guide
        • init()
        • <Form>
          • contextRef
          • Event Handlers
            • onSubmit()
            • onLoad()
            • onChange()
            • onAction()
            • onError()
            • onFormComplete()
            • onView()
          • Custom JSX Components
          • PopupOptions
          • initialLoader
        • getFieldValues()
        • setFieldValues()
        • updateUserId()
        • Login API
          • <LoginForm>
          • useAuthClient()
      • Inline vs Popup Form
    • Javascript SDK
    • Context API
      • Field Object
      • field.setStyles()
      • Deprecated Context API
    • REST API
Powered by GitBook
On this page
  • Overview
  • Video Demo
  • Setup
  • Usage
  • Logic
  • Example

Was this helpful?

  1. Platform
  2. Build Forms
  3. Logic

Dynamically Repeating Containers

Have a form container and its contents dynamically repeat a number of times.

PreviousDisplay Dynamic TextNextAdvanced Logic & API Connections

Last updated 1 month ago

Was this helpful?

Overview

A step in your form may need to show a variable number of containers and elements depending on the user who is filling out the form. For example, you might use this to show multiple loan offers or allow the user to enter a sequence of information. In this case, you can take advantage of our Repeating Containers feature.

Video Demo

Setup

  1. In your Feathery visual editor, navigate to the step where you want to show a variable number of containers.

  2. Select the container and in properties (on the right sidebar), select the "Repeatable" option.

  1. Set all fields within the repeatable container to also be repeatable by clicking each field, and then setting them to repeatable in the properties section of the right side bar.

Usage

Now that the container is allowed to repeat, you can trigger it in two ways.

  1. Add two button elements to your step with the repeating container. Set the click action of the first button to Add a Repeating Container and the click action of the second button to Remove a Repeating Container. When your end-user clicks the first button in your form, another repetition will be added. When your end-user clicks the second, a repetition will be removed. Note that the Remove button needs to be placed in the repeated container and cannot be placed outside of it. The Add button can be placed anywhere, and you can specify which repeating container it will add.

Logic

For Logic rules triggered by clicking a repeated container or object within the repeated container, you can use feathery.trigger.repeatIndex to know which repeated container object was clicked. This will return the index of the clicked object, starting with 0 for the first repeated container

Example

You're building a financial app offering loans to your users. On the last step of your form, you want to show your user a variable number of offers, one in each container.

From the dashboard, you create a hidden field called offer-description and set it as a text variable in a container of the the last step of your form. Then, you set that container as repeatable from the right sidebar.

Finally, from our SDK that you installed in your codebase, you run the following code to show your user two different offers.

import { setValues } from '@feathery/react';

setValues({'offer-description': ['My first offer', 'My second offer']})

Set the value of a field(s) in the container to a list of repeating field values. Your form will automatically infer from the length of the list how many repetitions of the container are needed. Repeating field values can be programmatically or with .

https://www.loom.com/share/c75da44eb0b34d5184ba378b647b2fa1
advanced logic
set from the SDK