MCP element reference: interactive elements in a bit

Every interactive element you can put in a bit over MCP: what it is for, the props it accepts, and a worked example. This page is generated from the rules Floxar's server applies, and every example on it was built by the server's own write path, so what you see is what a write accepts. The tools themselves are in authoring content.

How elements are written

A new element takes two parts in the same add_bit or update_bit call:

A line in bit_body that places it, carrying a key you choose in its anchor, as in the table below. Keys are 1 to 32 letters, digits, _ or -, and each is used once.
An entry in elements with the same key, the element's type, its props and, for a check-list, radio button or dropdown, its items. Item lines carry their own keys.

The answer's minted_node_ids maps each key to the id Floxar created. At most 200 entries and items go in one call.

Markdown alone never creates an element: a line that only looks like one, without a matching elements entry, is refused with UNSUPPORTED_MARKDOWN_CONSTRUCT. When you update a bit, keep every element's anchor exactly as get_bit returned it; an element whose anchor you drop is refused with BIT_CONTENT_LOSS unless you list it in remove_node_ids. To change an existing element's props, send an elements entry with its id instead of a key.

Type	On a step	Placed in `bit_body` by
`check-list`	`CheckListItem`	`[check-list: Before you ship](floxar-node:ship)`
`date-picker`	`DatePicker`	`[date-picker: Delivery date](floxar-node:delivered)`
`dropdown`	`Dropdown`	`[dropdown: Damage type](floxar-node:damage)`
`iframe`	not recorded	`[iframe](floxar-node:rates)`
`link-block`	`LinkBlock`	`[link-block](floxar-node:portal)`
`link-inline`	`LinkInline`	`Read the [carrier guide](https://example.com/guide "floxar-node:guide") before you book.`
`radio-button`	`RadioButton`	`[radio-button: Within the refund window?](floxar-node:window)`
`searchable-field`	`SearchableField`	`[searchable-field: Carrier](floxar-node:carrier)`
`text-area`	`TextArea`	`[text-area: Order number](floxar-node:order)`
`video-external`	`Video`	`![Packing a fragile item](https://example.com/packing.mp4 "floxar-node:demo")`

Answering elements on a step

A person answers in the app; an agent answers with submit_step_data, naming each element by its element_id and element_type. The value it sends: {value: <inner>}, inner by element_type: TextArea a string; DatePicker a string per config.picker_type (date YYYY-MM-DD, time HH

:SS

, datetime-local YYYY-MM-DDTHH

:SS

); Dropdown an option's value (its name when it has none); RadioButton an item's text; either may instead be the option's/item's id; CheckListItem a boolean; SearchableField an array of items from config.data; LinkInline / LinkBlock {clicked: boolean, url: config.url}; Video {played: boolean}.

check-list

A list of items to tick. Each item is recorded on the trail as its own CheckListItem, and an item can be required. On a step and in submit_step_data it is CheckListItem.

Props (elements[].props):

Prop	Type	Limits	Required
`label`	string	—	no

Items (elements[].items, one per option, each with an id to edit it or a key to add it; text is the text shown):

Prop	Type	Limits	Required
`checked`	boolean	—	no
`required`	boolean	—	no
`text`	string	—	no

Example. The bit_body to send:

[check-list: Before you ship](floxar-node:ship)
- [ ] [Label printed](floxar-node:label)
- [ ] [Invoice enclosed](floxar-node:invoice)

with elements:

[
  {
    "items": [
      {
        "key": "label",
        "required": true,
        "text": "Label printed"
      },
      {
        "key": "invoice",
        "text": "Invoice enclosed"
      }
    ],
    "key": "ship",
    "props": {
      "label": "Before you ship"
    },
    "type": "check-list"
  }
]

get_bit then returns the body with each key replaced by the id Floxar created:

[check-list: Before you ship](floxar-node:<id of ship>)
- [ ] [Label printed](floxar-node:<id of label>) *(required)*
- [ ] [Invoice enclosed](floxar-node:<id of invoice>)

and the step shows it as:

[check-list: Before you ship]
- [ ] Label printed *(required)*
- [ ] Invoice enclosed

date-picker

A date, a time, or both, chosen by the person or agent running the step. On a step and in submit_step_data it is DatePicker.

Props (elements[].props):

Prop	Type	Limits	Required
`default_to_now`	boolean	—	no
`label`	string	—	no
`picker_type`	one of date, time, datetime-local	—	no
`required`	boolean	—	no
`seconds_precision`	boolean	—	no

Example. The bit_body to send:

[date-picker: Delivery date](floxar-node:delivered)

with elements:

[
  {
    "key": "delivered",
    "props": {
      "label": "Delivery date",
      "picker_type": "date",
      "required": true
    },
    "type": "date-picker"
  }
]

get_bit then returns the body with each key replaced by the id Floxar created:

[date-picker: Delivery date](floxar-node:<id of delivered>) (required)

and the step shows it as:

[date-picker: Delivery date] (required)

One choice from a list of options. Bit connections can depend on the option chosen. On a step and in submit_step_data it is Dropdown.

Props (elements[].props):

Prop	Type	Limits	Required
`label`	string	—	no
`required`	boolean	—	no

Items (elements[].items, one per option, each with an id to edit it or a key to add it; name is the text shown):

Prop	Type	Limits	Required
`name`	string	—	no
`value`	string	—	no

Example. The bit_body to send:

[dropdown: Damage type](floxar-node:damage)
- [Crushed](floxar-node:crushed)
- [Wet](floxar-node:wet)
- [Missing items](floxar-node:missing)

with elements:

[
  {
    "items": [
      {
        "key": "crushed",
        "name": "Crushed",
        "value": "crushed"
      },
      {
        "key": "wet",
        "name": "Wet",
        "value": "wet"
      },
      {
        "key": "missing",
        "name": "Missing items",
        "value": "missing"
      }
    ],
    "key": "damage",
    "props": {
      "label": "Damage type",
      "required": true
    },
    "type": "dropdown"
  }
]

get_bit then returns the body with each key replaced by the id Floxar created:

[dropdown: Damage type](floxar-node:<id of damage>) (required)
- [Crushed](floxar-node:<id of crushed>)
- [Wet](floxar-node:<id of wet>)
- [Missing items](floxar-node:<id of missing>)

and the step shows it as:

[dropdown: Damage type] (required)
- Crushed
- Wet
- Missing items

iframe

An embedded page shown in the step. It records nothing on the trail. It is not a step element: nothing is answered or recorded for it.

Props (elements[].props):

Prop	Type	Limits	Required
`height`	number or string	or the same number as text	no
`url`	string	—	yes
`urlDisplayOption`	one of none, full, domain	—	no
`width`	number or string	or the same number as text	no

Example. The bit_body to send:

[iframe](floxar-node:rates)

with elements:

[
  {
    "key": "rates",
    "props": {
      "height": 400,
      "url": "https://example.com/rates"
    },
    "type": "iframe"
  }
]

get_bit then returns the body with each key replaced by the id Floxar created:

[iframe](floxar-node:<id of rates>)

and the step shows it as:

[Embedded content](https://example.com/rates)

link-block

A link shown as a card with its title, description and image. Opening it is recorded as clicked. On a step and in submit_step_data it is LinkBlock.

Props (elements[].props):

Prop	Type	Limits	Required
`bitId`	string	—	no
`custom_description`	string	—	no
`custom_title`	string	—	no
`is_no_description`	boolean	—	no
`is_no_icon`	boolean	—	no
`is_no_image`	boolean	—	no
`is_no_link`	boolean	—	no
`url`	string	—	no

Example. The bit_body to send:

[link-block](floxar-node:portal)

with elements:

[
  {
    "key": "portal",
    "props": {
      "custom_title": "Carrier portal",
      "url": "https://example.com/portal"
    },
    "type": "link-block"
  }
]

get_bit then returns the body with each key replaced by the id Floxar created:

[link-block](floxar-node:<id of portal>)

and the step shows it as:

[Carrier portal](https://example.com/portal)

link-inline

A link inside a sentence whose click is recorded on the trail. It sits in the text, not on a line of its own. On a step and in submit_step_data it is LinkInline.

Props (elements[].props):

Prop	Type	Limits	Required
`url`	string	—	yes

Example. The bit_body to send:

Read the [carrier guide](https://example.com/guide "floxar-node:guide") before you book.

with elements:

[
  {
    "key": "guide",
    "props": {
      "url": "https://example.com/guide"
    },
    "type": "link-inline"
  }
]

get_bit then returns the body with each key replaced by the id Floxar created:

Read the [carrier guide](https://example.com/guide "floxar-node:<id of guide>") before you book.

and the step shows it as:

Read the [carrier guide](https://example.com/guide) before you book.

radio-button

One choice from a group of options shown together. Bit connections can depend on the option chosen. On a step and in submit_step_data it is RadioButton.

Props (elements[].props):

Prop	Type	Limits	Required
`label`	string	—	no
`required`	boolean	—	no

Items (elements[].items, one per option, each with an id to edit it or a key to add it; text is the text shown):

Prop	Type	Limits	Required
`checked`	boolean	—	no
`text`	string	—	no

Example. The bit_body to send:

[radio-button: Within the refund window?](floxar-node:window)
- ( ) [Yes](floxar-node:yes)
- ( ) [No](floxar-node:no)

with elements:

[
  {
    "items": [
      {
        "key": "yes",
        "text": "Yes"
      },
      {
        "key": "no",
        "text": "No"
      }
    ],
    "key": "window",
    "props": {
      "label": "Within the refund window?",
      "required": true
    },
    "type": "radio-button"
  }
]

get_bit then returns the body with each key replaced by the id Floxar created:

[radio-button: Within the refund window?](floxar-node:<id of window>) (required)
- ( ) [Yes](floxar-node:<id of yes>)
- ( ) [No](floxar-node:<id of no>)

and the step shows it as:

[radio-button: Within the refund window?] (required)
- ( ) Yes
- ( ) No

searchable-field

A search box over a list of values you provide, for long lists such as products, carriers or locations. On a step and in submit_step_data it is SearchableField.

Props (elements[].props):

Prop	Type	Limits	Required
`data`	array of string or object	at most 5000 items	no
`label`	string	—	no
`length`	integer or string	1 to 50; or the same number as text	no
`maxResults`	integer or string	1 to 100; or the same number as text	no
`multiSelectResults`	boolean	—	no
`noResultsText`	string	—	no
`pagination`	boolean	—	no
`placeholderText`	string	—	no
`required`	boolean	—	no
`searchMode`	one of exact match, partial match, exact, partial	—	no

Example. The bit_body to send:

[searchable-field: Carrier](floxar-node:carrier)

with elements:

[
  {
    "key": "carrier",
    "props": {
      "data": [
        "Parcel Express",
        "Freight Line",
        "Courier One"
      ],
      "label": "Carrier",
      "maxResults": 10,
      "required": true,
      "searchMode": "partial match"
    },
    "type": "searchable-field"
  }
]

get_bit then returns the body with each key replaced by the id Floxar created:

[searchable-field: Carrier](floxar-node:<id of carrier>) (required)

and the step shows it as:

[searchable-field: Carrier] (required)

text-area

Free text, from a short code to several paragraphs, with optional length limits and a pattern the answer must match. On a step and in submit_step_data it is TextArea.

Props (elements[].props):

Prop	Type	Limits	Required
`autoComplete`	one of on, off	—	no
`autoCorrect`	one of on, off or boolean	—	no
`label`	string	—	no
`length`	integer or string	1 to 5000; or the same number as text	no
`lines`	integer or string	1 to 100; or the same number as text	no
`maxLength`	integer or string	1 to 5000; or the same number as text	no
`minLength`	integer or string	0 to 5000; or the same number as text	no
`placeholder`	string	—	no
`required`	boolean	—	no
`spellCheck`	boolean	—	no
`validationMessage`	string	—	no
`validationMode`	one of enforced, warning	—	no
`validationPattern`	string	—	no
`wrap`	one of soft, hard	—	no

Example. The bit_body to send:

[text-area: Order number](floxar-node:order)

with elements:

[
  {
    "key": "order",
    "props": {
      "label": "Order number",
      "lines": 1,
      "maxLength": 8,
      "placeholder": "A-123456",
      "required": true,
      "validationMessage": "Use the form A-123456",
      "validationMode": "enforced",
      "validationPattern": "^A-[0-9]{6}$"
    },
    "type": "text-area"
  }
]

get_bit then returns the body with each key replaced by the id Floxar created:

[text-area: Order number](floxar-node:<id of order>) (required)

and the step shows it as:

[text-area: Order number] (required)

video-external

A video from an external address. Watching it is recorded as played. On a step and in submit_step_data it is Video.

Props (elements[].props):

Prop	Type	Limits	Required
`altText`	string	—	no
`aspectRatio`	string	—	no
`maxWidth`	number or string	or the same number as text	no
`url`	string	—	yes
`urlDisplayOption`	one of none, full, domain	—	no

Example. The bit_body to send:

![Packing a fragile item](https://example.com/packing.mp4 "floxar-node:demo")

with elements:

[
  {
    "key": "demo",
    "props": {
      "altText": "Packing a fragile item",
      "url": "https://example.com/packing.mp4"
    },
    "type": "video-external"
  }
]

get_bit then returns the body with each key replaced by the id Floxar created:

![Packing a fragile item](https://example.com/packing.mp4 "floxar-node:<id of demo>")

and the step shows it as:

![Packing a fragile item](https://example.com/packing.mp4)

Last reviewed: 2026-10-06

How elements are written​

Answering elements on a step​

check-list​

date-picker​

dropdown​

iframe​

link-block​

link-inline​

radio-button​

searchable-field​

text-area​

video-external​

How elements are written

Answering elements on a step

check-list

date-picker

dropdown

iframe

link-block

link-inline

radio-button

searchable-field

text-area

video-external