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

Was this helpful?

  1. Developers
  2. React SDK
  3. API Guide

<Form>

React component that renders a Feathery form

Previousinit()NextcontextRef

Last updated 1 month ago

Was this helpful?

Initialize this component in your React app at the location where you want a Feathery form to appear. It renders your form as an HTML <form> element.

Prop
Type
Description

formId

string

ID of your Feathery form to display. It can be found on your dashboard, under the form's settings page.

optional functions

Pass in to run custom code when different events occur in your form (submit, load, error, etc.)

React Ref

Pass in a ref that receives the , which contains helper functions allowing you to modify the form state directly.

initialValues

optional object

Initial form field values of the shape {<fieldId>: <fieldValue>}. If not passed in, Feathery will generate default initial values as necessary.

initialStepId

optional string

If specified, this will be the first step your user sees.

initialLoader

optional object

Options for the loader as the form initializes. By default no loader will be shown while loading the form, unless the user is waiting on authentication.

popupOptions

optional PopupOptions

If popup options are set, your Feathery form will show up as a popup on top of your page rather than inline with the rest of the content.

language

optional string

This is a comma-separated list of ISO 639-1 language code(s) to show the form in if a in one of those languages has been uploaded for the form in its settings.

The languages will be prioritized according to their order in the specified string. If no translation for any of the specified languages is found, the form language will by default show up as written in the visual editor.

readOnly

optional boolean

Disables form validation and submissions and prevents user from editing field values.

hashNavigation

optional boolean

Overrides the "Track Step with URL Hash" setting on the form. When set, allows the browser to 'remember' step transitions so users can use the browser back and forward buttons.

hideTestUI

optional boolean

If showing the test or draft form, hide the test nav bar. If not specified, the test nav bar will be shown.

formProps

optional object

Override specific props of the underlying HTML<form> element by passing in an object mapping your desired prop keys to values.

elementProps

optional object

Override specific form element props by passing in a map from element ID to an object of custom props to be applied to that element. E.g., you can hide a field by passing in {<fieldID> : {style: {visibility: 'hidden'}}}.

customComponents

{<containerId>: <JSX element>}

Custom components you'd like to position per-step, in the flow of elements.

children

optional JSX elements

Custom, absolute-positioned components that you want to render across all steps.

className

optional string

Your to associate with your form element.

style

optional object

Your to associate with your form element.

Event Handlers
callback functions
contextRef
form context
Full reference
translation file
Full reference
Full reference
custom CSS class(es)
custom inline CSS styling