> For the complete documentation index, see [llms.txt](https://docs.abtasty.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.abtasty.com/web-experimentation-and-personalization/editors-and-widget/list-of-widgets/custom-widget/custom-widgets-list-of-propname-fields-and-their-specificities.md).

# Custom Widgets: List of propname Fields and Their Specificities

👉 To learn how to create a custom widget, refer to [How to create a Custom Widget](/assets-library/widget-library/how-to-create-a-custom-widget.md).

👉 To learn more about the functioning od Custom Widgets, refer to [Custom widgets: global usage and information](/web-experimentation-and-personalization/editors-and-widget/list-of-widgets/custom-widget/custom-widgets-global-usage-and-information.md).

Here is the list of propname fields and their specificities​:

* [areainput](#h_01j1s72psxxtsa9506wqrp9xhe)
* [checkbox](#h_01j1s72psxqkmm9efjz7955be2)
* [codeeditor](#h_01j1s72psx0p1vnb39ec5cpegn)
* [colorpicker](#h_01j1s72psxne6e5qc2hf90d3ca)
* [datepicker](#h_01j1s72psxefe4gtb2q5qnfwsx)
* [datetimepicker](#h_01j1s72psxwbfm1b418jedfkjj)
* [datetimetimezonepicker](#h_01j1s72psxj2nv9kykk5fsxxf3)
* [hidden](#h_01j1s72psx6qnrg74br8b3w28w)
* [inlinenotification](#h_01j9y5eeg0stz9e5vv8f997htr)
* [number](#h_01j1s72psxh6jzwv7kkqxqg0dp)
* [paragraph](#h_01j1s72psx8hnwqqnqf40b5wst)
* [radio](#h_01j1s72psxxxrjaemw27dav0rs)
* [radioimage](#h_01j1s72psxj20cdasapdvzx18e)
* [searchselect](#h_01j1s72psxkbtqv6yhywns3grh)
* [select](#h_01j1s72psxsmpwvygxr0221n1d)
* [selectelement](#h_01j1s72psxbqdbqkfhg0ymzc9j)
* [slider](#h_01j1s72psx4qm3scpkpja22703)
* [switch](#h_01j1s72psxy80gbq8n6ns4cc2n)
* [textarea](#h_01j1s72psx0rns3cm7eqgvzy38)
* [text](#h_01j1s72psxm522042y85f23gc1)
* [url](#h_01j1s72psyz91pb1j7w7zahrx9)
* [wysiwyg](#h_01j1s72psyq51z7fyp1jkq20xj)

## areainput[​](https://developers.abtasty.com/docs/components/components-form#areainput) <a href="#h_01j1s72psxxtsa9506wqrp9xhe" id="h_01j1s72psxxtsa9506wqrp9xhe"></a>

Displays a list of input numbers\
It is primarily used to define box-model dimensions (top, right, bottom, left) for many uses, margins, padding, positioning, etc.

<img src="/files/yP4FQ1coHU9kM4B6PUzk" alt="" width="375">

**value**: array containing an object\
The number of elements in your object will define the number of inputs. Input labels are object keys and the values are the key/values from the object.

```
const paddingForm = {
   type: 'areainput',
   label: 'Container padding',
   propName: 'containerPadding',
   value: [{ top: 35, left: 60, bottom: 35, right: 60 }],
};
```

## checkbox[​](https://developers.abtasty.com/docs/components/components-form#checkbox) <a href="#h_01j1s72psxqkmm9efjz7955be2" id="h_01j1s72psxqkmm9efjz7955be2"></a>

Displays a checkbox in the form

<img src="/files/tmpOQxdA4F1dmRJ0dwnP" alt="Custom_Widgets_Custom_Forms_03.png" width="161">

**value:** checkboxes do not have a value property but a checked property instead, which is a boolean

```
const triggerOnPageLoadForm = {
   type: 'checkbox',
   label: {
       en: 'Page load',
       fr: 'Au chargement de la page',
       es: 'Al cargar la página',
       de: 'Beim Laden der Seite',
   },
   propName: 'pageLoad',
   checked: true,
};
```

## codeeditor[​](https://developers.abtasty.com/docs/components/components-form#codeeditor) <a href="#h_01j1s72psx0p1vnb39ec5cpegn" id="h_01j1s72psx0p1vnb39ec5cpegn"></a>

Displays a code editor input\
You can specify the code type (JS or CSS).

<img src="/files/lFKJIH5Vaaju5qqpd2Yj" alt="" width="375">

**value**: character string

**Specific Property**

**rows:** enables you to define the number of rows to display by default in the UI.

```
export const triggerEventCustomScript = {
   type: 'codeeditor',
   label: 'Custom Trigger JavaScript Code',
   propName: `TriggerEventCustom`,
   value: `
       async function launchIfScroll() {
           return new Promise(resolve => {
               document.addEventListener('scroll', () => resolve(true), {once: true});
           });
       }
       const result = await launchIfScroll();
       return resolve(result);`,
   rows: 15
   };
```

## colorpicker <a href="#h_01j1s72psxne6e5qc2hf90d3ca" id="h_01j1s72psxne6e5qc2hf90d3ca"></a>

Displays a color picker

<img src="/files/w1mIFtCfhZtd5fsTkG05" alt="" width="375">

**value:** character string

```
const backgroundColorForm = {
   type: 'colorpicker',
   label: 'Background color',
   propName: 'backgroundColor',
   value: "rgba(247, 247, 247, 1)",
};
```

## datepicker[​](https://developers.abtasty.com/docs/components/components-form#datepicker) <a href="#h_01j1s72psxefe4gtb2q5qnfwsx" id="h_01j1s72psxefe4gtb2q5qnfwsx"></a>

Displays a simple date picker

<img src="/files/pq5zb1XdxrpbC8Xw0Olg" alt="" width="317">

**value:** date object or valid date string

```
DATA value: Date.tostring()
const inputDate = {
   type: 'datepicker',
   label: 'Pick a date to display',
   propName: 'date',
   value: new Date(),
};
```

## datetimepicker[​](https://developers.abtasty.com/docs/components/components-form#datetimepicker) <a href="#h_01j1s72psxwbfm1b418jedfkjj" id="h_01j1s72psxwbfm1b418jedfkjj"></a>

Displays an all-in-one date and time picker, enabling you to get a requested date and time from users.\
Can be used for a countdown, for instance.

<img src="/files/eXEH0yHnzVuIpZ7Djqkf" alt="" width="375">

**value:** date object or valid date string.\
An empty date string will use the current date as the default value.

**return value:** Unix timestamp

```
const inputDateTime = {
   type: 'datetimepicker',
   label: 'Pick a date and time to display',
   propName: 'datetime',
   value: '',
};
```

## datetimetimezonepicker[​](https://developers.abtasty.com/docs/components/components-form#datetimetimezonepicker) <a href="#h_01j1s72psxj2nv9kykk5fsxxf3" id="h_01j1s72psxj2nv9kykk5fsxxf3"></a>

Displays a datetimepicker, in addition to a collapsed group to set further information :

* a toggle to follow the sun (will end at this time in each timezone or not)
* a selection input to choose a timezone when needed (when the "follow the sun" toggle is off)

<img src="/files/m1EeY4DF1P4oytwRqi2Y" alt="Custom_Widgets_Custom_Forms_08.png" width="375">

**value:** object with two properties at init :

* **type**: should be set to **init** on the form part
* **value**: same as **datetimepicker** but also allows a GMT timezone string

**DATA value:** a complete object

* **previewTimestamp:** timestamp number (value to be used for the editor preview when the "follow the sun" toggle is on)
* **type**: **local** or **global** value, depending on whether the "follow the sun" toggle is on or off.
* **timecustom widgets**: object, in numbers, corresponding to the minute, hour, day, month, or year.
* **raw**: object with all data:
* **followTheSun:** boolean
* **previewTimezone:** character string for geolocation timezone\
  Ex: 'Europe/Paris' (value to be used for the editor preview when "follow the sun" toggle is on)
* **timedef:** object. Same as **timecustom** widgets.
* **timezone**: character string for geolocation timezone\
  ex: 'America/Los\_Angeles'
* **userContext**: object with complete data related to the current user:
* **isInDST:** boolean describing whether the user is currently in daylight - saving time or not.
* **local**: object similar to timecustom widgets but with current user date and time values
* **offset**: number resulting from **getTimezoneOffset**
* **timestamp**: timestamp number
* **timezone**: character string for geolocation timezone\
  ex: 'Asia/Tokyo'

```
const inputDateTimeTimeZone = {
   type: 'datetimetimezonepicker',
   label: 'Pick a date and time to display',
   propName: 'datetimeTimezone',
   value: {
       type: 'init',
       value: '+0100'
   },
};
```

## hidden[​](https://developers.abtasty.com/docs/components/components-form#hidden) <a href="#h_01j1s72psx6qnrg74br8b3w28w" id="h_01j1s72psx6qnrg74br8b3w28w"></a>

Hides an input

**value**: character string

```
const hiddenInput = {
   type: 'hidden',
   value: window.innerHeight,
   propName: 'innerHeightSetup',
};
```

## inlinenotification[​](https://developers.abtasty.com/docs/components/components-form#inlinenotification) <a href="#h_01j9y5eeg0stz9e5vv8f997htr" id="h_01j9y5eeg0stz9e5vv8f997htr"></a>

Displays information to the user about the features of your form or custom widget

<img src="/files/B3taEhZ6rQxWQWblKMgx" alt="" width="375">

**value**: This custom widget does not need a value property.

**Specific Properties:**

**label**: character string corresponding to the message to be displayed

**hrefUrl**: character string corresponding to the URL you want the user to be redirected to

```
const documentationNotification = {
   type: 'inlinenotification',
   label: 'Click here to access documentation',
   hrefUrl: 'https://developers.abtasty.com/',
};
```

## number[​](https://developers.abtasty.com/docs/components/components-form#number) <a href="#h_01j1s72psxh6jzwv7kkqxqg0dp" id="h_01j1s72psxh6jzwv7kkqxqg0dp"></a>

Displays an input of type number

<img src="/files/KZQU5dRxkjUYTzPpDLKB" alt="png" width="185">

**value**: number

**Specific Properties**:

You are also able to provide more properties:

**min**: number (default value is **0**);

**max**: number (default value is **9999**);

**step**: number (default value is **1**).

```
const zindexCustomForm = {
   type: 'number',
   label: 'Custom z-index value',
   propName: 'zindexCustom',
   value: 1,
   min: -2147483647,
   max: 2147483647,
};
```

## paragraph[​](https://developers.abtasty.com/docs/components/components-form#paragraph) <a href="#h_01j1s72psx8hnwqqnqf40b5wst" id="h_01j1s72psx8hnwqqnqf40b5wst"></a>

Displays text into the form.\
It can be used to inform, alert, and so on

**value**: no value is needed in this case.

Content should be placed in the **text** property - character string.

```
const styleHelper = {
   type: 'paragraph',
   text: `In that part you can add styles to your custom widget.`,
};
```

## radio[​](https://developers.abtasty.com/docs/components/components-form#radio) <a href="#h_01j1s72psxxxrjaemw27dav0rs" id="h_01j1s72psxxxrjaemw27dav0rs"></a>

Displays a radio input with multiple radios

<img src="/files/BulB0mWDygHO0gtrxAgH" alt="" width="375">

**value**: character string || number || boolean

**Specific Property for Radio:**

options **\[Array of objects: {label: type label, value: same as value}]**

```
const insertPositionForm = {
   type: 'radio',
   label: 'Select where to insert the custom widget compared to selected element',
   propName: 'insertPositionType',
   value: 'afterbegin',
   options: [
       {
           label: 'Before selected element',
           value: 'beforebegin'
       },
       {
           label: 'At the beginning of selected element',
           value: 'afterbegin'
       },
       {
           label: 'At the end of selected element',
           value: 'beforeend'
       },
       {
           label: 'After selected element',
           value: 'afterend'
       }
   ]
};
```

## radioImage[​](https://developers.abtasty.com/docs/components/components-form#radioimage) <a href="#h_01j1s72psxj20cdasapdvzx18e" id="h_01j1s72psxj20cdasapdvzx18e"></a>

Display a radio input with images/icons as buttons

<img src="/files/1G4gnqFA8oFAz7IhTHva" alt="" width="331">

**value**: character string

**Specific Property:** options are the same as for radio label and style\
The character string should be long or short, depending on the desired button size.

```
const textAlignmentForm = {
   type: 'radioImage',
   label: 'Text alignment',
   propName: 'textAlign',
   value: 'center',
   style: 'little',
   options: [
       {
           label: 'Left',
           value: 'left',
           src: `https://widgets-images.abtasty.com/style/icon-text-alignLeft.png`
       },
       {
           label: 'Center',
           value: 'center',
           src: `https://widgets-images.abtasty.com/style/icon-text-alignCenter.png`
       },
       {
           label: 'Right',
           value: 'right',
           src: `https://widgets-images.abtasty.com/style/icon-text-alignRight.png`
       }
   ]
};
```

## searchselect[​](https://developers.abtasty.com/docs/components/components-form#searchselect) <a href="#h_01j1s72psxkbtqv6yhywns3grh" id="h_01j1s72psxkbtqv6yhywns3grh"></a>

Displays a select that includes a search input for selects that have several values

<img src="/files/3cO6pNWSiY3v2kHlpLH4" alt="" width="375">

**value**: character string

**Specific Property:**&#x6F;ptions are the same as for **radio**

**Specific Options Properties:**

**placeholder**: character string.\
Text to be displayed when the search field is empty.

```
const textFontNameForm = {
   type: 'searchselect',
   label: 'Select font',
   propName: 'fontName',
   value: 'inherit',
   placeholder: 'Search for a font',
   options: [
       {
           'label': 'Inherited from element',
           'value': 'inherit',
           'description': '',
       }
       {
           'label': 'Roboto',
           'value': 'Roboto',
           'description': '12 styles',
       },
       {
           'label': 'Open Sans',
           'value': 'Open Sans',
           'description': '10 styles',
       },
       {
           'label': 'Lato',
           'value': 'Lato',
           'description': '10 styles',
       },
       {
           'label': 'Montserrat',
           'value': 'Montserrat',
           'description': '18 styles',
       },
   ],
};
```

## select[​](https://developers.abtasty.com/docs/components/components-form#select) <a href="#h_01j1s72psxsmpwvygxr0221n1d" id="h_01j1s72psxsmpwvygxr0221n1d"></a>

Displays a select

<img src="/files/oo3NwoF67QnrL2XbDyJv" alt="" width="375">

**value**: character string

**Special Property:** options are the same as for **radio**

```
const backgroundPositionForm = {
   type: 'select',
   label: 'Background position',
   propName: 'backgroundPosition',
   value: 'center',
   options: [
       {
           label: 'Top',
           value: 'top'
       },
       {
           label: 'Bottom',
           value: 'bottom'
       },
       {
           label: 'Center',
           value: 'center'
       },
       {
           label: 'Left',
           value: 'left'
       },
       {
           label: 'Right',
           value: 'right'
       },
   ]
};
```

## selectelement[​](https://developers.abtasty.com/docs/components/components-form#selectelement) <a href="#h_01j1s72psxbqdbqkfhg0ymzc9j" id="h_01j1s72psxbqdbqkfhg0ymzc9j"></a>

Displays an input used to fill selectors containing a button.\
It will enable the user to select a website element.

<img src="/files/06ZKsPynp77scmuBAAfP" alt="" width="375">

**value**: character string (more likely formatted as a CSS selector)

```
const triggerEventClick = {
   type: 'selectelement',
   label: 'Select the element that will trigger the custom widget on click'
   propName: `triggerElementClick`,
   value: 'body',
};
```

## slider[​](https://developers.abtasty.com/docs/components/components-form#slider) <a href="#h_01j1s72psx4qm3scpkpja22703" id="h_01j1s72psx4qm3scpkpja22703"></a>

Displays a slider to select a number as a value

<img src="/files/flJAASjReLUZLzIVHclr" alt="" width="375">

**value**: number

**Specific Properties: min** and **max** of type Number\
Both are optional. The default values are **0** and **100**.

```
const borderWidthForm = {
   type: 'slider',
   label: 'Border width',
   propName: 'borderWidth',
   value: 2,
   min: 0,
   max: 50,
};
```

## switch[​](https://developers.abtasty.com/docs/components/components-form#switch) <a href="#h_01j1s72psxy80gbq8n6ns4cc2n" id="h_01j1s72psxy80gbq8n6ns4cc2n"></a>

Displays a switch that enables the user to select an option

<img src="/files/d3KRfNOTLkYrzKBPWrx5" alt="" width="375">

**value**: boolean

```
const displayCloseButtonSwitchForm = {
   type: 'switch',
   label: 'Display close button',
   propName: 'closeButton',
   value: true,
};
```

## textarea[​](https://developers.abtasty.com/docs/components/components-form#textarea) <a href="#h_01j1s72psx0rns3cm7eqgvzy38" id="h_01j1s72psx0rns3cm7eqgvzy38"></a>

Displays a text area that enables the user to enter text

<img src="/files/V4W4lretVjk0lgreUB0U" alt="" width="375">

**value**: character string

**Specific Property:** rows of Number type to define the number of rows of your textarea

```
const textContentForm = {
   type: 'textarea',
   label: 'Text to set in your custom widget',
   propName: 'textContent',
   value: `Your message goes here.
Keep it short and to the point. Make short sentences.
Invite your users to consider your idea.
You can do multi-line messages.`,
   rows: 6,
};
```

## text[​](https://developers.abtasty.com/docs/components/components-form#text) <a href="#h_01j1s72psxm522042y85f23gc1" id="h_01j1s72psxm522042y85f23gc1"></a>

Displays a simple text input

<img src="/files/mF1TF3stq5Ia02LIQxof" alt="" width="375">

**value**: character string

```
const buttonTextForm = {
   type: 'text',
   label: `Button's text`,
   propName: 'buttonText',
   value: 'See the offer',
};
```

## url[​](https://developers.abtasty.com/docs/components/components-form#url) <a href="#h_01j1s72psyz91pb1j7w7zahrx9" id="h_01j1s72psyz91pb1j7w7zahrx9"></a>

A text type input dedicated to the URL\
Format checking and error handling are managed by default.

<img src="/files/8r7j2s2oQfplASMLIj7J" alt="" width="375">

**value**: character string

```
const linkForm = {
   type: 'url',
   label: `Button's URL`,
   propName: 'redirectionUrl',
   value: window.location.origin,
};
```

## wysiwyg[​](https://developers.abtasty.com/docs/components/components-form#wysiwyg) <a href="#h_01j1s72psyq51z7fyp1jkq20xj" id="h_01j1s72psyq51z7fyp1jkq20xj"></a>

Displays a textarea input enriched with text styling features

<img src="/files/WGMa97CBpF695WbJ1c5h" alt="" width="375">

**value**: character string

```
const custom widgetTextContent = {
   type: 'wysiwyg',
   label: 'Text',
   propName: 'content',
   value: `Your message goes here. Keep it short and to the point. Make short sentences. Invite your users to consider your idea.

​​​​​​​You can do multi-line messages.`,
};
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.abtasty.com/web-experimentation-and-personalization/editors-and-widget/list-of-widgets/custom-widget/custom-widgets-list-of-propname-fields-and-their-specificities.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.