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. Context API

Field Object

PreviousContext APINextfield.setStyles()

Last updated 10 months ago

Was this helpful?

Field objects are the primary mechanism for accessing and manipulating field data and properties. They can be accessed via the .

Field Property
Type
Description

value

optional polymorphic: boolean | string | string[] | number | number[] | Promise | Promise[] | Record<string, any>

Read/write property for getting or setting the field value. The type of the value varies depending upon the field type.

The value is an array type for multi-valued field types (e.g. multi select, etc.) or if the field is repeating.

null if no submission, Promise<File> if file submission, Base64 string if signature.

required

boolean

If the field must be filled out before submitting. Read/write property.

disabled

boolean

If the field is disabled or interactable. Read/write property.

options

string[] | { value: string; label ?: string; image ?: string }[]

Allowed options to choose from, if the field specifies them (e.g. dropdown, radio buttons, etc.).

Read/write property.

type

string enum

The field type (e.g. textarea, checkbox, etc.). Only available for fields on the loaded form.

Read-only property.

displayText

optional string

The text to display to your user along with the field

Read-only property.

onThisForm

boolean

True if this field appears on the loaded form. False if the field is from another form.

Read-only property.

isHiddenField

boolean

True if this field is one of the special 'hidden' fields that do not appear on a form. False if this field is a regular form field.

Read-only property.

placeholder

string

The placeholder text for the field that is shown when the field has no value.

Read/write property.

setStyles()

(styles: Record<string, any>) => void

setError()

(...error: string | {index:number; message: string}) => void

Method used to set the error of a field. The error may be passed as text or as an object.

An error with the shape {message: <fieldErrorString>, index: <fieldIndex>}} will set an error for a specific repeatable field across its repetitions. Setting an error prevents the step from submitting.

equals()

(...values: string | Field) => boolean

Returns true if the field equals any of the values passed. A value may be a string or another Field.

notEquals()

(...values: string | Field) => boolean

Returns true if the field does not equal any of the values passed. A value may be a string or another Field.

greaterThan()

(...values: string | Field) => boolean

Returns true if the field is greater than any of the values passed. A value may be a string or another Field.

greaterThanOrEqual()

(...values: string | Field) => boolean

Returns true if the field is greater than or equal to any of the values passed. A value may be a string or another Field.

lessThan()

(...values: string | Field) => boolean

Returns true if the field is less than any of the values passed. A value may be a string or another Field.

lessThanOrEqual()

(...values: string | Field) => boolean

Returns true if the field is less than or equal to any of the values passed. A value may be a string or another Field.

isFilled()

() => boolean

Returns true if the field contains a value that was set by the user or by logic.

isEmpty()

() => boolean

Returns true if the field does not contains a value, i.e. the field was not set by the user or by logic.

isTrue()

() => boolean

isFalse()

() => boolean

contains()

(...values: string | Field) => boolean

Returns true if the field text contains the text of any of the values passed. The text must match on upper/lower case exactly. A value may be a string or another Field.

doesNotContain()

(...values: string | Field) => boolean

Returns true if the field text does not contain the text of any of the values passed. The text must match on upper/lower case exactly. A value may be a string or another Field.

containsIgnoreCase()

(...values: string | Field) => boolean

Returns true if the field text contains the text of any of the values passed. The text comparison ignores upper/lower case differences and will match on different cases. A value may be a string or another Field.

doesNotContainIgnoreCase()

(...values: string | Field) => boolean

Returns true if the field text does not contain the text of any of the values passed. The text comparison ignores upper/lower case differences and will match on different cases. A value may be a string or another Field.

startsWith()

(...values: string | Field) => boolean

Returns true if the field text starts with the text of any of the values passed. The text must match on upper/lower case exactly. A value may be a string or another Field.

doesNotStartWith()

(...values: string | Field) => boolean

Returns true if the field text does not start with the text of any of the values passed. The text must match on upper/lower case exactly. A value may be a string or another Field.

endsWith()

(...values: string | Field) => boolean

Returns true if the field text ends with the text of any of the values passed. The text must match on upper/lower case exactly. A value may be a string or another Field.

doesNotEndWith()

(...values: string | Field) => boolean

Returns true if the field text does not end with the text of any of the values passed. The text must match on upper/lower case exactly. A value may be a string or another Field.

isNumerical()

() => boolean

Returns true if the field value is a number.

isText()

() => boolean

Returns true if the field value is text and not a number.

selectionsInclude()

(...values: string | Field) => boolean

Used for multi-valued fields. Returns true if any of the field's values exactly equal the text of any of the values passed as parameters. A value may be a string or another Field.

selectionsDoNotInclude()

(...values: string | Field) => boolean

Used for multi-valued fields. Returns true if none of the field's values exactly equal the text of any of the values passed as parameters. A value may be a string or another Field.

Dynamically update the styles of a form field.

Returns true if the field is true or .

Returns true if the field is true or .

Context API
Style API Reference
truthy
falsy