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
        • PowerPoint 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
  • Examples
  • Button group with custom layout
  • Multi-select button group with card layout
  • Dynamic Number of Buttons in Group

Was this helpful?

  1. Platform
  2. Build Forms
  3. Elements

Custom Fields

Build a custom field by composing multiple Feathery elements together.

PreviousCustom HTML, JS, CSS, and IframesNextDesign

Last updated 10 months ago

Was this helpful?

While Feathery does allow you to specify , you can also create custom fields directly from the visual editor by composing multiple Feathery elements.

Examples

Button group with custom layout

Multi-select button group with card layout

By setting the background color of a container and using the Save Value to Field click action, you are able to make a clickable card group consisting of any elements you desire. In the image above the first three cards are made with a checkbox field and a few text elements. The last card is just a checkbox and a text field.

Dynamic Number of Buttons in Group

Branching off of the above example, you can create a single container and set it as repeating to allow it to repeat a dynamic number of times. Then, you can set the click action on the container to Save Value to Field and make sure to set the save field value to either a repeating field or a hidden field that contains an array of values.

Then, set the number of container repeats and set the save field value to an array with the same number of repeats. Now, when each repeating container is clicked, it will save the value corresponding to the same index in the save field array.

By default this is a multiselect action - each repeating container can be selected independently. You can turn on the Single Select option for the Save Value to Field action to ensure only one repeat of the field can be selected at once.

If the default field layout doesn't work for your use case, you can build your own field with a custom layout.

The field above is built with individual configured with the Save Value to Field click action. Specify the custom value to store on click, and then connect the button to a field where the value will be stored. If you want the user to only be able to select a single button, you can re-use the same field across all of the buttons in the field. If you want multi-select behavior, use a different field per button so they don't override each other on click.

button group
buttons
custom components
Feathery's default button group styles all options the same way. Using individual buttons allows for custom styling, such as the double-wide "Something else?" text field.
If the button click action is Save Value To Field, you can configure the value to store and the field to store the value into. The button will appear toggled when selected. Clicking the button again clears the value from the field.
If you select a checkbox as the field type there is no value to specify. The action will toggle the checkbox based on the previous value.
You can use to create unique card layouts.
Containers