Build Custom Form Fields

Customize your forms with your own components written in React.

Selecting a custom component to add

Setting up a custom Feathery field

Within your white label admin account, go to your account settings, and then click the Custom Fieldstab. Specify the following information

1. Custom Field Name: user-friendly label for your custom field

2. Custom Field Type: internal, unique identifier for your custom field type

3. Custom Field Icon: URL to icon (preferably SVG) to use in the form designer for your custom field

4. Custom Field code: React component code to render your custom field

Your admin account and workspaces will subsequently have access to the custom field element that they can drag onto and use within their forms.

Component Requirements

Your custom component must follow these requirements to work properly:

• Must be exported as the default export

• Must accept and handle value and onChange props

• Must be a valid React component

Example Component

import React from 'react';

const Counter = ({ value = 0, onChange }) => {
  const handleClick = () => {
    onChange(value + 1); // Increments the current value
  };

  return (
    <div>
      <p>Current value: {value}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;

Props

Your component will receive these props:

• value: The current value of the field. Can be a valid json value or object

• onChange: Function to update the field's value

  • Accepts one parameter: the new value

  • Updates the form state automatically

Using NPM Packages

You can import and use npm packages in your custom component. Here's a more complex example using the react library react-colorful

import React from 'react';
import { HexColorPicker } from 'react-colorful';

const ColorPicker = ({ value = '#4287f5', onChange }) => {
  function getContrastTextColor(hexBackground) {
    // Remove # if present
    const hex = hexBackground.replace('#', '');

    // Convert hex to RGB
    const r = parseInt(hex.slice(0, 2), 16);
    const g = parseInt(hex.slice(2, 4), 16);
    const b = parseInt(hex.slice(4, 6), 16);

    // Calculate luminance using WCAG formula
    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;

    return luminance > 0.5 ? '#000000' : '#ffffff';
  }

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '20px',
        padding: '20px',
        maxWidth: '400px',
        margin: '0 auto'
      }}
    >
      <HexColorPicker color={value} onChange={onChange} />
      <div
        style={{
          padding: '20px',
          borderRadius: '8px',
          backgroundColor: value,
          color: getContrastTextColor(value),
          textAlign: 'center',
          transition: 'all 0.3s ease'
        }}
      >
        {value}
      </div>
    </div>
  );
};

export default ColorPicker;

Custom Color Picker component

Current Limitations

Please note the following limitations:

• Style properties inside the designer are not currently supported

• Component must be self-contained in a single file

• Component cannot use Typescript

These limitations will be updated in the near future.