> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

---
id: 5d79587f-6e3e-4d9d-a990-dca4e00ac21e
---

# Module and theme fields

> HubSpot has many different field types, you can use to add flexibility and customization to your themes and modules.

export const RequiredIndicator = () => {
  return <span className="required-indicator">
      required
    </span>;
};

Add fields to modules and themes to allow content creators to control various aspects of a page within the page editor. Below, learn about all of the fields available for modules and themes, along with their available properties.

For more information about implementing module and theme fields, including field groups and repeating fields, view the [module and theme fields overview](/cms/reference/fields/overview).

## Properties used by all fields

All fields share a set of common properties. These are general fields, such as the field's name or the help text that displays for content creators using the field in the module or theme.

```json wrap theme={null}
{
  "name": "is_teaser_img",
  "label": "Enable Teaser Image",
  "required": false,
  "locked": false,
  "type": "boolean",
  "inline_help_text": "Shows Teaser image when toggled on",
  "help_text": "Teaser images are used to help provide visual context to the post.",
  "default": false,
  "alias_mapping": {
    "property_aliases_paths": {
      "is_teaser_img": ["old_boolean_field_name"]
    }
  }
}
```

| Parameter                     | Type    | Description                                                                                                                                                                                                                                                                                                                                                                  | Default                             |
| ----------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------- |
| `name` <RequiredIndicator />  | String  | The field's name, which you'll reference when incorporating the field and its values in the module or theme. Cannot contain spaces or special characters.                                                                                                                                                                                                                    | `richtext_field, date_field, etc.`  |
| `label` <RequiredIndicator /> | String  | The text the content creator sees describing the field. May contain spaces.                                                                                                                                                                                                                                                                                                  | `Rich text field, Date field, etc.` |
| `required`                    | Boolean | Sets whether the field can be left blank in the editor. If `true`, content cannot be published without a value in the field.                                                                                                                                                                                                                                                 | `false`                             |
| `locked`                      | Boolean | Sets whether the field is editable in the content editor. If `true`, the field will not appear in the content editor.                                                                                                                                                                                                                                                        | `false`                             |
| `type`                        | String  | The type of field. Field types are unique per field and can be found within the documentation for each field below.                                                                                                                                                                                                                                                          |                                     |
| `inline_help_text`            | String  | Text that displays inline below field's label (limit 400 characters). Best used for information required to use the field. You can include the following HTML tags (other tags will be ignored on render): `a`, `b`, `br`, `em`, `i`, `p`, `small`, `strong`, `span`.                                                                                                        |                                     |
| `help_text`                   | String  | Text that displays in the editor within a tooltip on hover to assist the content creator (limit 300 characters). Best used for information that is supplementary but not required to use the field. You can include the following HTML tags (other tags will be ignored on render):`a`, `b`, `br`, `em`, `i`, `p`, `small`, `strong`, `span`.                                |                                     |
| `id`                          | String  | The field's unique ID, which is set by HubSpot. When building locally you do not need to specify this ID.                                                                                                                                                                                                                                                                    |                                     |
| `visibility`                  | Array   | Sets the field's display conditions. For example, you can set a field to only display when another checkbox field has been selected. Learn more about [visibility](/cms/reference/fields/overview#field-visibility).                                                                                                                                                         |                                     |
| `display_width`               | String  | By default, fields are full-width in the editor. When two consecutive fields in the `fields.json` file are set to `half_width`, they will instead appear next to each other in the editor.                                                                                                                                                                                   |                                     |
| `alias_mapping`               | Object  | An alias for the field, which maps existing field values to a new location without breaking existing content. This can be helpful when needing to update a field that's currently being used in live content, such as moving a field from the *Content* tab to the *Styles* tab. Learn more about [alias mapping](/cms/start-building/building-blocks/fields/alias-mapping). |                                     |

## Alignment

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/Styles.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json) as a [style field](/cms/reference/fields/overview#style-fields).
</Callout>

Enables content creators to position an element within a container. To enable text alignment, use the [text alignment field](/cms/reference/fields/module-theme-fields#text-alignment) instead.

<Frame>
  <img width="150" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-alignment.png" alt="Alignment field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "img_position",
      "label": "Position Image",
      "help_text": "Position the image within its container.",
      "required": false,
      "type": "alignment",
      "alignment_direction": "BOTH",
      "default": {
        "horizontal_align": "CENTER",
        "vertical_align": "TOP"
      }
    }
    ```

    | Parameter             | Type   | Description                                                                                                                                                                                       | Default |
    | --------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default`             | Object | Object containing `horizontal_align` and `vertical_align`:<ul><li>`horizontal_align`: `"LEFT"` \| `"CENTER"` \| `"RIGHT"`</li><li>`vertical_align`: `"TOP"` \| `"MIDDLE"` \| `"BOTTOM"`</li></ul> |         |
    | `alignment_direction` | String | Determines if only horizontal, only vertical, or both alignment controls should be shown. Can be:<ul><li>`HORIZONTAL`</li><li>`VERTICAL`</li><li>`BOTH`</li></ul>                                 | `BOTH`  |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, AlignmentField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <AlignmentField
          name="img_position"
          label="Position Image"
          helpText="Position the image within its container."
          required={false}
          alignmentDirection="BOTH"
          default={{
            horizontal_align: "CENTER",
            vertical_align: "TOP",
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop                 | Type   | Description                                                                                                                                                                                       | Default |
    | -------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default`            | Object | Object containing `horizontal_align` and `vertical_align`:<ul><li>`horizontal_align`: `"LEFT"` \| `"CENTER"` \| `"RIGHT"`</li><li>`vertical_align`: `"TOP"` \| `"MIDDLE"` \| `"BOTTOM"`</li></ul> |         |
    | `alignmentDirection` | String | Determines if only horizontal, only vertical, or both alignment controls should be shown. Can be:<ul><li>`HORIZONTAL`</li><li>`VERTICAL`</li><li>`BOTH`</li></ul>                                 | `BOTH`  |
  </Tab>
</Tabs>

## Background image

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/Styles.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json) as a [style field](/cms/reference/fields/overview#style-fields).
</Callout>

This field provides a background image field which has subfields for background position and background size. Background image fields have a `.css` property that returns CSS based on the field's value. [Learn more about the generated CSS property.](/cms/reference/fields/overview#generated-css)

<Frame>
  <img width="350" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-background-image.png" alt="Background image field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "bg_image",
      "label": "Background image",
      "required": false,
      "type": "backgroundimage",
      "default": {
        "src": "https://example.com/img.png",
        "background_position": "MIDDLE_CENTER",
        "background_size": "cover"
      }
    }
    ```

    | Parameter | Type   | Description                                                               | Default |
    | --------- | ------ | ------------------------------------------------------------------------- | ------- |
    | `default` | Object | Object containing the image src, background position and background size. | `null`  |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, BackgroundImageField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <BackgroundImageField
          name="bg_image"
          label="Background image"
          required={false}
          default={{
            src: "https://example.com/img.png",
            background_position: "MIDDLE_CENTER",
            background_size: "cover",
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop      | Type   | Description                                                               | Default |
    | --------- | ------ | ------------------------------------------------------------------------- | ------- |
    | `default` | Object | Object containing the image src, background position and background size. | `null`  |
  </Tab>
</Tabs>

## Blog

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

This field provides a way for content editors to select a blog, providing you, the developer the blog's ID. This is useful for situations like pulling teaser information for featured blogs in modules. You can use the blog ID in blog-related [HubL functions](/cms/reference/hubl/functions) to get information like [blog authors](/cms/reference/hubl/functions#blog-authors), [recent blog posts](/cms/reference/hubl/functions#blog-recent-posts), [recent blog posts with a specific tag](/cms/reference/hubl/functions#blog-recent-tag-posts), and more.

<Frame>
  <img width="360" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-blog.png" alt="Screenshot of Blog field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "blog",
      "label": "Blog",
      "required": false,
      "locked": false,
      "type": "blog",
      "default": 1234567890
    }
    ```

    | Parameter | Type                | Description                                                                                                                                                  | Default |
    | --------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
    | `default` | "default" / blog ID | Specifies which blog is selected by default. This parameter accepts arguments of either 'default' or a blog ID (available in the URL of the Blog dashboard). | `null`  |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, BlogField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <BlogField name="blog" label="Blog" required={false} locked={false} default={1234567890} />
      </ModuleFields>
    );
    ```

    | Prop      | Type                  | Description                                  | Default |
    | --------- | --------------------- | -------------------------------------------- | ------- |
    | `default` | `'default'` / blog ID | Specifies which blog is selected by default. | `null`  |
  </Tab>
</Tabs>

## Boolean

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/Styles.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json) and [themes](/cms/start-building/building-blocks/overview#fields-json) as a [style field](/cms/reference/fields/overview#style-fields).
</Callout>

This field provides a way for content editors to enable/disable functionality. Booleans can only be `true` or `false`. Often it makes sense to make groups or fields conditional based on boolean fields. If you think you might need to provide more than two states in the future, a [choice](#choice) field may be a better option as you can grow into that with less effort should needs change later.

<Frame>
  <img width="235" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-field-boolean.png" alt="Screenshot of Boolean field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "is_teaser_img",
      "label": "Enable Teaser Image",
      "required": false,
      "locked": false,
      "type": "boolean",
      "display": "checkbox",
      "inline_help_text": "Shows Teaser image when toggled on",
      "help_text": "Teaser images are used to help provide visual context to the post.",
      "default": false
    }
    ```

    | Parameter | Type    | Description                                                                                     | Default    |
    | --------- | ------- | ----------------------------------------------------------------------------------------------- | ---------- |
    | `default` | Boolean | Sets whether the default state of this field is `true` or `false`.                              | `false`    |
    | `display` | String  | Choose the visual display style for the field. Can appear as either a `toggle` or a `checkbox`. | `checkbox` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, BooleanField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <BooleanField
          name="is_teaser_img"
          label="Enable Teaser Image"
          required={false}
          locked={false}
          display="checkbox"
          inlineHelpText="Shows Teaser image when toggled on"
          helpText="Teaser images are used to help provide visual context to the post."
          default={false}
        />
      </ModuleFields>
    );
    ```

    | Prop      | Type    | Description                                                                                     | Default    |
    | --------- | ------- | ----------------------------------------------------------------------------------------------- | ---------- |
    | `default` | Boolean | Sets whether the default state of this field is `true` or `false`.                              | `false`    |
    | `display` | String  | Choose the visual display style for the field. Can appear as either a `toggle` or a `checkbox`. | `checkbox` |
  </Tab>
</Tabs>

<Tip>
  A toggle switch can make sense when the value of the field enables/disables other fields conditionally being shown. Another time a toggle may be useful is when the field represents a major design change for the module.

  Checkboxes make sense for smaller changes that may not have as drastic of an effect on the module's display, such as hiding or showing individual small elements.
</Tip>

## Border

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/Styles.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json) as a [style field](/cms/reference/fields/overview#style-fields).
</Callout>

This field provides content creators a user interface for creating a border around an element. Border fields have a `.css` property that returns CSS based on the field's value. [Learn more about the generated CSS property.](/cms/reference/fields/overview#generated-css)

<Frame>
  <img width="350" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-border.png" alt="Screenshot of border module field in page editor" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "id": "styles.border",
      "name": "border",
      "label": "border",
      "required": false,
      "locked": false,
      "allow_custom_border_sides": false,
      "type": "border",
      "default": {
        "top": {
          "width": { "value": 1, "units": "px" },
          "opacity": 100,
          "style": "solid",
          "color": "#ffffff"
        },
        "bottom": {
          "width": { "value": 1, "units": "px" },
          "opacity": 100,
          "style": "solid",
          "color": "#ffffff"
        },
        "left": null,
        "right": null
      }
    }
    ```

    | Parameter                   | Type    | Description                                                                            | Default |
    | --------------------------- | ------- | -------------------------------------------------------------------------------------- | ------- |
    | `default`                   | Object  | object with keys for border radius, top, bottom, left, and right sides.                | `{}`    |
    | `allow_custom_border_sides` | Boolean | When `true`, allows content creators to set borders on individual sides independently. | `false` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, BorderField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <BorderField
          id="styles.border"
          name="border"
          label="border"
          required={false}
          locked={false}
          allowCustomBorderSides={false}
          default={{
            top: {
              width: { value: 1, units: "px" },
              opacity: 100,
              style: "solid",
              color: "#ffffff",
            },
            bottom: {
              width: { value: 1, units: "px" },
              opacity: 100,
              style: "solid",
              color: "#ffffff",
            },
            left: null,
            right: null,
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop                     | Type    | Description                                                                            | Default |
    | ------------------------ | ------- | -------------------------------------------------------------------------------------- | ------- |
    | `default`                | Object  | object with keys for border radius, top, bottom, left, and right sides.                | `{}`    |
    | `allowCustomBorderSides` | Boolean | When `true`, allows content creators to set borders on individual sides independently. | `false` |
  </Tab>
</Tabs>

## Choice

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/Styles.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json) and [themes](/cms/start-building/building-blocks/overview#fields-json) as a [style field](/cms/reference/fields/overview#style-fields).
</Callout>

Choice fields allow a content creator to select one or more items from a list of options. Using the `display` property, you can set display the options in a dropdown menu, radio select, or checkboxes, or a range of buttons. Learn more about [choice field display options below](#choice-button-presets).

<Frame>
  <img width="340" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-choice.png" alt="choice-field-dropdown" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "img_position",
      "label": "Image Position",
      "required": false,
      "locked": false,
      "multiple": false,
      "display": "select",
      "choices": [
        ["img--left", "Image Left - Text Right"],
        ["img--right", "Text Left - Image Right"]
      ],
      "type": "choice",
      "default": "img--left"
    }
    ```

    | Parameter                       | Type    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Default                                                  |
    | ------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
    | `choices` <RequiredIndicator /> | Array   | Array containing the selectable options, formatted as unique internal value followed by label.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]` |
    | `default`                       | Value   | Sets the default selected value from the choice array.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |                                                          |
    | `multiple`                      | Boolean | Optional field that enables multiple options to be selected when set to `true`. Set `display` to `checkbox` or `select` to configure whether the field displays as a list of checkboxes or a dropdown menu.                                                                                                                                                                                                                                                                                                                                                                                                    | `false`                                                  |
    | `display`                       | String  | Set the field's appearance using one of the following values:<ul><li>`select`: renders a dropdown menu. Allows for selecting multiple options when `multiple` is set to `true`. </li><li>`checkbox`: renders a list of selectable checkboxes. Allows for selecting multiple options when `multiple` is set to `true` and `reordering_enabled` is set to `false`.</li><li>`radio`: renders a list of radio button options. Does not allow for selecting multiple options.</li><li>`buttons`: renders a set of buttons based on the specified `preset`. Does not allow for selecting multiple options.</li></ul> | `"select"`                                               |
    | `reordering_enabled`            | Boolean | When set to `true`, allows content creators to reorder the field's options in the editor. To enable this, `multiple` must also be set to `true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`                                                  |
    | `preset`                        | String  | Configures the button preset to use when `display` is set to `buttons`. For each preset, you'll need to configure the `choices` labels to match a specific set of values. Learn more about these [preset options](#choice-button-presets) below.                                                                                                                                                                                                                                                                                                                                                               |                                                          |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, ChoiceField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <ChoiceField
          name="img_position"
          label="Image Position"
          required={false}
          locked={false}
          multiple={true}
          display="select"
          choices={[
            ["img--left", "Image Left - Text Right"],
            ["img--right", "Text Left - Image Right"],
          ]}
          default="img--left"
        />
      </ModuleFields>
    );
    ```

    | Prop                | Type    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Default                                                  |
    | ------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- |
    | `choices`           | Array   | Array containing the selectable options, formatted as unique internal value followed by label.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | `[ [ "value 1", "Label 1" ], [ "value 2", "Label 2" ] ]` |
    | `default`           | Value   | Sets the default selected value from the choice array.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |                                                          |
    | `multiple`          | Boolean | Optional field that enables multiple options to be selected when set to `true`.Set `display` to `checkbox` or `select` to configure whether the field displays as a list of checkboxes or a dropdown menu.                                                                                                                                                                                                                                                                                                                                                                                                     | `false`                                                  |
    | `display`           | String  | Set the field's appearance using one of the following values:<ul><li>`select`: renders a dropdown menu. Allows for selecting multiple options when `multiple` is set to `true`. </li><li>`checkbox`: renders a list of selectable checkboxes. Allows for selecting multiple options when `multiple` is set to `true` and `reordering_enabled` is set to `false`.</li><li>`radio`: renders a list of radio button options. Does not allow for selecting multiple options.</li><li>`buttons`: renders a set of buttons based on the specified `preset`. Does not allow for selecting multiple options.</li></ul> | `"select"`                                               |
    | `reorderingEnabled` | Boolean | When set to `true`, allows content creators to reorder the field's options in the editor. To enable this, `multiple` must also be set to `true`.                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`                                                  |
    | `preset`            | String  | Configures the button preset to use when `display` is set to `buttons`. For each preset, you'll need to configure the `choices` labels to match a specific set of values. Learn more about these [preset options](#choice-button-presets) below.                                                                                                                                                                                                                                                                                                                                                               |                                                          |
  </Tab>
</Tabs>

### Choice button presets

To configure a choice field to display buttons instead of a dropdown menu, checkboxes, or radio selects, you can use any of the presets below. Each preset allows for a specific set of option labels, which you'll need to include in the `choices` array. These labels cannot be customized.

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "layout",
      "type": "choice",
      "label": "Layout",
      "required": false,
      "locked": false,
      "display": "buttons",
      "preset": "layout",
      "choices": [
        ["cards_value", "cards"],
        ["tiles_value", "tiles"],
        ["minimal_value", "minimal"]
      ]
    }
    ```
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, ChoiceField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <ChoiceField
          name="layout"
          label="Layout"
          required={false}
          locked={false}
          display="buttons"
          preset="layout"
          choices={[
            ["cards_value", "cards"],
            ["tiles_value", "tiles"],
            ["minimal_value", "minimal"],
          ]}
        />
      </ModuleFields>
    );
    ```
  </Tab>
</Tabs>

| Preset                         | Choice labels                               | Example                                                                                                                                                                  |
| ------------------------------ | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `case`                         | `none` \| `title` \| `upper` \| `lower`     | ![Case preset](https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-choice-preset-case.png)                                           |
| `expand_icon`                  | `caret` \| `plus` \| `chevron`              | ![Expand icon preset](https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-choice-preset-expand_icon.png)                             |
| `icon_background_shape`        | `none` \| `square` \| `rounded` \| `circle` | ![Icon background shape preset](https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-choice-preset-icon_background_shape.png)         |
| `icon_size`                    | `small` \| `medium` \| `large`              | ![Icon preset](https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-choice-preset-icon_size.png)                                      |
| `layout`                       | `cards` \| `tiles` \| `minimal`             | ![Layout preset](https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-choice-preset-layout.png)                                       |
| `social_icon_background_shape` | `none` \| `square` \| `rounded` \| `circle` | ![Social icon background preset](https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-choice-preset-social_icon_background_shape.png) |
| `social_icon_size`             | `small` \| `medium` \| `large`              | ![Social icon size preset](https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-choice-preset-social_icon_size.png)                   |

## Color

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/Styles.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json) and [themes](/cms/start-building/building-blocks/overview#fields-json) as a [style field](/cms/reference/fields/overview#style-fields).
</Callout>

Color fields provide a color picker interface for content creators. They support solid colors as well as transparency. They are a perfect choice for when you want to give content creators full control over colors within a module.

By default, the opacity input of a color field is hidden for email modules, as some email clients don't respect opacity rules. You can reveal the opacity field for email modules by setting `show_opacity` to `true`.

<Frame>
  <img src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-color.png" alt="Color field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name" : "color_field",
      "label" : "Color",
      "required" : false,
      "type" : "color",
      "default" : {
        "color" : "#ffffff",
        "opacity" : 100
      }
    }
    ```

    | Parameter         | Type    | Description                                                                                                                                                                                                                                                 | Default                                    |
    | ----------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
    | `default`         | Object  | Sets the default selected color and opacity.                                                                                                                                                                                                                | `{ "color" : "#ffffff", "opacity" : 100 }` |
    | `show_opacity`    | Boolean | Sets whether opacity input is shown.<ul><li>`true`: the opacity input is shown.</li><li>`false`: the opacity input is hidden.</li><li>If left undefined, opacity input will not display in email modules, but will display in other module types.</li></ul> | `undefined`                                |
    | `limited_options` | Array   | An array of strings that hides the default color grid and overrides the favorite colors list (the "Favorites" label becomes "Available colors"). Values in the array must be either a hex code or a `color` hex value at any inheritance path.              | `undefined`                                |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, ColorField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <ColorField
          name="bg_color"
          label="Background color"
          required={false}
          locked={false}
          default={{
            color: "#ffffff",
            opacity: 100,
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop             | Type    | Description                                                                                                                                                                                                                                                 | Default                                    |
    | ---------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ |
    | `default`        | Object  | Sets the default selected color and opacity.                                                                                                                                                                                                                | `{ "color" : "#ffffff", "opacity" : 100 }` |
    | `showOpacity`    | Boolean | Sets whether opacity input is shown.<ul><li>`true`: the opacity input is shown.</li><li>`false`: the opacity input is hidden.</li><li>If left undefined, opacity input will not display in email modules, but will display in other module types.</li></ul> | `undefined`                                |
    | `limitedOptions` | Array   | An array of strings that hides the default color grid and overrides the favorite colors list (the "Favorites" label becomes "Available colors"). Values in the array must be either a hex code or a `color` hex value at any inheritance path.              | `undefined`                                |
  </Tab>
</Tabs>

## CTA

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

<Warning>
  **Please note:** this field is only available for ***Content Hub*** *Professional* and *Enterprise*.
</Warning>

Call-To-Action (CTA) fields provide a way for users to pick a CTA to display. CTA's are essentially trackable buttons or links. Content creators [create CTAs](https://knowledge.hubspot.com/ctas/create-calls-to-action-ctas) that can be used throughout a site.

<Frame>
  <img width="180" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-cta.png" alt="Call To Action Field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "cta",
      "label": "CTA",
      "required": false,
      "locked": false,
      "type": "cta",
      "default": null
    }
    ```

    | Parameter | Type   | Description                                                                                                                                 | Default |
    | --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default` | String | The default selected CTA, specified by ID. CTA IDs can be found in the URL when [editing a CTA in HubSpot](https://app.hubspot.com/l/ctas). | `null`  |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, CTAField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <CTAField name="cta" label="CTA" required={false} locked={false} default={null} />
      </ModuleFields>
    );
    ```

    | Prop      | Type   | Description                                                                                                                                        | Default |
    | --------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default` | String | The default selected CTA. Expects a CTA ID, which can be found in the URL when editing a CTA in the [CTA manager](https://app.hubspot.com/l/ctas). | `null`  |
  </Tab>
</Tabs>

## CRM object

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

<Warning>
  **Please note:** this field is only available for ***Content Hub*** *Professional* and *Enterprise*.
</Warning>

CRM object fields provide a way for users to pick an individual instance of a CRM object to display.

`module.fieldname.properties` returns the properties fetched from this object instance. This makes it so you don't need to use the `crm_object()` function to get the data for the selected object instance.

`module.fieldname.id` returns the object instance ID.

<Frame>
  <img width="345" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-crm-object.png" alt="CRM Object Field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "crmobject_field",
      "label": "CRM object",
      "required": false,
      "locked": false,
      "object_type": "PRODUCT",
      "properties_to_fetch": [],
      "type": "crmobject",
      "default": {
        "id": 1
      }
    }
    ```

    | Parameter                           | Type   | Description                                                                                                                                                                              | Default |
    | ----------------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `object_type` <RequiredIndicator /> | String | Type of CRM Object the user can pick from. [Supported CRM Object Types](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types)                         |         |
    | `properties_to_fetch`               | Array  | Array of property names associated with the object type in string form (e.g., `"hs_cost_of_goods_sold"`). Use this to limit the information available to the page to just what you need. |         |
    | `default`                           | Object | The ID of the default selected object instance (e.g., contact or company ID).                                                                                                            | `null`  |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, CRMObjectField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <CRMObjectField
          name="crmobject_field"
          label="CRM object"
          required={false}
          locked={false}
          objectType="PRODUCT"
          propertiesToFetch={[]}
          default={{
            id: 1,
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop                               | Type   | Description                                                                                                                                                                              | Default |
    | ---------------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `objectType` <RequiredIndicator /> | String | Type of CRM Object the user can pick from. [Supported CRM Object Types](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types)                         |         |
    | `propertiesToFetch`                | Array  | Array of property names associated with the object type in string form (e.g., `"hs_cost_of_goods_sold"`). Use this to limit the information available to the page to just what you need. |         |
    | `default`                          | Object | The ID of the default selected object instance (e.g., contact or company ID).                                                                                                            | `null`  |
  </Tab>
</Tabs>

## CRM object property

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

<Warning>
  **Please note:** this field is only available for ***Content Hub*** *Professional* and *Enterprise*.
</Warning>

Use the CRM object property field to access property metadata, such as the label and property name, from a specified object type. This enables content creators to select from object properties when needing to display property details on a page.

For example, you could add this field to a custom table module to populate table headings based on the selected properties.

<Frame>
  <img width="345" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-crm-object-property.png" alt="crm-object-property-dropdown-menu0" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "crmobjectproperty_field",
      "label": "CRM object property",
      "required": true,
      "locked": false,
      "object_type": "PRODUCT",
      "type": "crmobjectproperty",
      "default": {
        "property": "hs_cost_of_goods_sold"
      }
    }
    ```

    | Parameter                           | Type   | Description                                                                                                                                                                        |
    | ----------------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | `object_type` <RequiredIndicator /> | String | Type of CRM Object the user can pick from. Learn more about [supported CRM object types](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). |
    | `default`                           | Object | Contains the default property to display.                                                                                                                                          |

    In addition, you can use the following snippets to return other property details:

    * `{{ module.fieldname.property }}`: returns the property's internal name.
    * `{{ module.fieldname.property_definition.label }}`: returns the property's label.
    * `{{ module.fieldname.property_definition.type }}`: returns the property type (e.g., string).
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, CRMObjectPropertyField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <CRMObjectPropertyField
          name="crmobjectproperty_field"
          label="CRM object property"
          required={true}
          locked={false}
          objectType="PRODUCT"
          default={{
            property: "hs_cost_of_goods_sold",
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop                               | Type   | Description                                                                                                                                                                        |
    | ---------------------------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | `objectType` <RequiredIndicator /> | String | Type of CRM Object the user can pick from. Learn more about [supported CRM object types](/cms/start-building/features/data-driven-content/crm-objects#supported-crm-object-types). |
    | `default`                          | Object | Contains the default property to display.                                                                                                                                          |
  </Tab>
</Tabs>

## Date

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Date fields provide a date picker interface to make it easy for content creators to select a date. Returns a timestamp you can use in your code.

<Frame>
  <img width="340" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-date-select.png" alt="Date field with calendar picker open" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "date_field",
      "label": "Date",
      "required": false,
      "locked": false,
      "type": "date",
      "default": 1772562600000
    }
    ```

    | Parameter | Type      | Description                                                                                                                                                                                       | Default |
    | --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default` | Timestamp | The Unix Epoch timestamp for the date and time you want to default to. Leave this null to allow the date and time picker to start the content creator at the current date and time in the picker. | `null`  |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, DateField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <DateField
        name="date_field"
        label="Date"
        required={false}
        locked={false}
        default={1772562600000}
        />
      </ModuleFields>
    );
    ```

    | Prop      | Type      | Description                                                                                                                                                                                       | Default |
    | --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default` | Timestamp | The Unix Epoch timestamp for the date and time you want to default to. Leave this null to allow the date and time picker to start the content creator at the current date and time in the picker. | `null`  |
  </Tab>
</Tabs>

## Date and time

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Date and time fields provide a date picker interface just like the date field, as well as a time picker to make it easy for content creators to select a date and time of day. Returns a timestamp you can use in your code.

<Frame>
  <img width="340" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-datetime-select.png" alt="Date and time field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "datetime_field",
      "label": "Date and time",
      "required": false,
      "locked": false,
      "type": "datetime",
      "default": 1772562600000
    }
    ```

    | Parameter | Type      | Description                                                                                                                                                                                       | Default |
    | --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default` | Timestamp | The Unix Epoch timestamp for the date and time you want to default to. Leave this null to allow the date and time picker to start the content creator at the current date and time in the picker. | `null`  |
    | `step`    | Number    | The minute increment for the time picker (e.g., `15` shows options every 15 minutes).                                                                                                             |         |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, DateTimeField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <DateTimeField
        name="datetime_field"
        label="Date and time"
        required={false}
        locked={false}
        default={1772562600000} />
      </ModuleFields>
    );
    ```

    | Prop      | Type      | Description                                                                                                                                                                                       | Default |
    | --------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default` | Timestamp | The Unix Epoch timestamp for the date and time you want to default to. Leave this null to allow the date and time picker to start the content creator at the current date and time in the picker. | `null`  |
    | `step`    | Number    | The minute increment for the time picker (e.g., `15` shows options every 15 minutes).                                                                                                             |         |
  </Tab>
</Tabs>

## Email Address

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Use this field to allow users to select email addresses associated with users in the account, or enter custom email addresses. For example, this could be useful when building out a *Contact us* section with an email address option. The email field returns an array of selected email addresses you can loop through.

<Frame>
  <img width="340" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-email-address.png" alt="email-field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "emails",
      "label": "Email address",
      "required": false,
      "allow_custom_email_addresses" : true,
      "type": "email",
      "default": null
    }
    ```

    | Parameter                      | Type    | Description                                                             | Default |
    | ------------------------------ | ------- | ----------------------------------------------------------------------- | ------- |
    | `default`                      | Array   | Array of email address strings.                                         | `null`  |
    | `allow_custom_email_addresses` | Boolean | When set to `false`, users won't be able to add custom email addresses. |         |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, EmailField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <EmailField
        name="emails"
        label="Email address"
        required={false}
        locked={false}
        default={null}
        allowCustomEmailAddresses={true}
        />
      </ModuleFields>
    );
    ```

    | Prop                        | Type    | Description                                                             | Default |
    | --------------------------- | ------- | ----------------------------------------------------------------------- | ------- |
    | `default`                   | Array   | Array of email address strings.                                         | `null`  |
    | `allowCustomEmailAddresses` | Boolean | When set to `false`, users won't be able to add custom email addresses. |         |
  </Tab>
</Tabs>

## Embed

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Embed fields allow the user to add a URL from an [oEmbed-enabled site](https://oembed.com/#section7) or paste in an embed code from another site. To learn more about oEmbed usage on HubSpot, and see use cases, visit our [oEmbed document](/cms/reference/fields/overview).

<Frame>
  <img width="345" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-embed.png" alt="Embed field " />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name" : "embed_field",
      "label" : "Embed",
      "required" : false,
      "locked" : false,
      "supported_source_types" : [ "oembed", "html" ],
      "supported_oembed_types" : [ "photo", "video", "link", "rich" ],
      "resizable" : true,
      "show_preview" : true,
      "supported_media_bridge_providers" : [ ],
      "type" : "embed",
      "display_width" : null,
      "default" : {
        "source_type" : "oembed"
      }
    }
    ```

    | Parameter                          | Type    | Description                                                                                                                                                                                                                                                          | Default                                |
    | ---------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
    | `supported_source_types`           | Array   | Supported source types for either oEmbed URLs (`oembed`), HTML embed code (`html`), or Media Bridge (`media_bridge`).                                                                                                                                                | `["oembed", "html"]`                   |
    | `supported_oembed_types`           | Array   | Supported oEmbed type including `"photo"`, `"video"`, `"link"`, and `"rich"`. Does not apply to the supported\_source\_types of html                                                                                                                                 | `[ "photo", "video", "link", "rich" ]` |
    | `supported_media_bridge_providers` | Array   | Array of provider IDs that determine which Media Bridge providers are available to select content from.Note: This param will also be populated when installing a [Media Bridge Provider Application](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media). |                                        |
    | `resizable`                        | Boolean | When set to `false`, users won't be able to resize the embed in the editor.                                                                                                                                                                                          | `true`                                 |
    | `show_preview`                     | Boolean | When set to `false`, the embed preview is hidden in the editor.                                                                                                                                                                                                      | `true`                                 |
    | `type`                             | String  | This parameter is always set to `"embed"`                                                                                                                                                                                                                            | `"embed"`                              |
    | `default`                          | Dict    | An array containing the `"source_type"` parameter. This parameter has one string based value from the options provided in the `"supported_source_types"` parameter.                                                                                                  | `oembed`                               |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, EmbedField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <EmbedField
          name="embed_field"
          label="Embed"
          required={false}
          locked={false}
          supportedSourceTypes={["oembed", "html"]}
          supportedOembedTypes={["photo", "video", "link", "rich"]}
          default={{
            source_type: "oembed",
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop                            | Type    | Description                                                                                                                                                                                                                                                          | Default                                |
    | ------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
    | `supportedSourceTypes`          | Array   | Supported source types for either oEmbed URLs (`oembed`), HTML embed code (`html`), or Media Bridge (`media_bridge`).                                                                                                                                                | `["oembed", "html"]`                   |
    | `supportedOembedTypes`          | Array   | Supported oEmbed type including `"photo"`, `"video"`, `"link"`, and `"rich"`. Does not apply to the supported\_source\_types of html                                                                                                                                 | `[ "photo", "video", "link", "rich" ]` |
    | `supportedMediaBridgeProviders` | Array   | Array of provider IDs that determine which Media Bridge providers are available to select content from.Note: This param will also be populated when installing a [Media Bridge Provider Application](https://ecosystem.hubspot.com/marketplace/apps/apps-for-media). |                                        |
    | `resizable`                     | Boolean | When set to `false`, users won't be able to resize the embed in the editor.                                                                                                                                                                                          | `true`                                 |
    | `showPreview`                   | Boolean | When set to `false`, the embed preview is hidden in the editor.                                                                                                                                                                                                      | `true`                                 |
    | `type`                          | String  | This parameter is always set to `"embed"`                                                                                                                                                                                                                            | `"embed"`                              |
    | `default`                       | Dict    | An array containing the `"source_type"` parameter. This parameter has one string based value from the options provided in the `"supported_source_types"` parameter.                                                                                                  | `oembed`                               |
  </Tab>
</Tabs>

## File

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

File fields allow the user to upload a file to the file manager, or document manager, and make it easy to attach items that are in those locations. This can be useful for linking out to PDF files or files of other formats. For displaying images on a page you should use the image field.

<Frame>
  <img width="340" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-file.png" alt="File field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "file_field",
      "label": "File",
      "required": false,
      "locked": false,
      "type": "file",
      "picker": "file",
      "default": null
    }
    ```

    | Parameter                      | Type   | Description                                                                                                                                                                                            | Default |
    | ------------------------------ | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
    | `default`                      | String | File URL.                                                                                                                                                                                              | `null`  |
    | `picker` <RequiredIndicator /> | String | The type of files to display in the dropdown menu, sourced from the file manager or document manager, depending on the option. Can be one of: `"file"`, `"document"`, `"image"`, `"video"`, `"audio"`. | `file`  |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, FileField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <FileField name="file_field" label="File" required={false} locked={false} picker="file" default={null} />
      </ModuleFields>
    );
    ```

    | Prop      | Type   | Description                                                                                                                                                                                            | Default |
    | --------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
    | `default` | String | File URL.                                                                                                                                                                                              | `null`  |
    | `picker`  | String | The type of files to display in the dropdown menu, sourced from the file manager or document manager, depending on the option. Can be one of: `"file"`, `"document"`, `"image"`, `"video"`, `"audio"`. | `file`  |
  </Tab>
</Tabs>

## Followup email

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

<Warning>
  **Please note:** this field is being deprecated in favor of attaching followup emails within form fields. Consider removing any followup email fields from this module beforehand. Learn more in the [Developer Changelog](https://developers.hubspot.com/changelog/june-2023-rollup).
</Warning>

Followup email fields allow a content creator to designate an email that will be sent in response to a form submission. This works in tandem with the [HubL form tag](/cms/reference/hubl/tags/standard-tags#form), through the `simple_email_campaign_id` parameter.

<Frame>
  <img src="https://f.hubspotusercontent00.net/hubfs/53/followup%20email%20field.png" alt="followup email field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "followup_email",
      "label": "Followup email",
      "required": false,
      "locked": false,
      "type": "followupemail",
      "default": null
    }
    ```

    | Parameter | Type   | Description | Default |
    | --------- | ------ | ----------- | ------- |
    | `default` | String | Email ID    | `null`  |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, FollowUpEmailField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <FollowUpEmailField name="followup_email" label="Followup email" required={false} locked={false} default={null} />
      </ModuleFields>
    );
    ```

    | Prop      | Type   | Description | Default |
    | --------- | ------ | ----------- | ------- |
    | `default` | String | Email ID    | `null`  |
  </Tab>
</Tabs>

## Font

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/Styles.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json) and [themes](/cms/start-building/building-blocks/overview#fields-json) as a [style field](/cms/reference/fields/overview#style-fields).
</Callout>

Font fields provide content creators basic font styling controls. Content creators can choose the size, color, font family, and the format (bold, italic, and underlined). The listed fonts are all standard web-safe fonts. These fonts are sourced from [Google Fonts](https://fonts.google.com/), but are served by HubSpot directly on the domain that the page loads on.

<Frame>
  <img width="340" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-font.png" alt="Font field" />
</Frame>

<Warning>
  **Please note:**

  * Font family is determined by the combination of the `font` and `font_set` properties. You must include both to load the font. When [inheriting fields](/cms/reference/fields/overview#inherited-fields), this means you need to inherit both values.
  * Hiding CSS-related sub fields with `visibility` will not prevent that CSS from being output in the styling returned in the field object. You'll still need to manually include the CSS in the `styles` object.
</Warning>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "font",
      "label": "Font",
      "required": false,
      "locked": false,
      "load_external_fonts": true,
      "type": "font",
      "default": {
        "size": 12,
        "font": "Merriweather",
        "font_set": "GOOGLE",
        "size_unit": "px",
        "color": "#000",
        "styles": {}
      },
      "visibility": {
        "hidden_subfields": {
          "font": true,
          "size": true
        }
      }
    }
    ```

    | Parameter             | Type    | Description                                                                                                                                                                                                                                          | Default                                                                 |
    | --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
    | `default`             | Object  | Font object with settings for size, sizing unit, color, and styles for bold, italic, and underline.                                                                                                                                                  | `{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }` |
    | `load_external_fonts` | Boolean | HubSpot automatically loads the selected web font to the page if the font is selected and referenced by HubL in a stylesheet or in a module. Set this to false, if you are already loading the font to the page, that way the font won't load twice. | `true`                                                                  |
    | `visibility`          | Object  | Using the `hidden_subfields` nested object, you can set a boolean for which controls of the Font field to hide. Subfields include: `font`, `size`, `bold`, `italic`, `underline`, and `color`.                                                       |                                                                         |
    | `variant`             | String  | If using a web font, the variant of the font you want to use. For example, to use the 700-weight version of a font, set this to `"700"`. To use the 400-weight italic version of a font, set this to `"400i"`.                                       |                                                                         |
    | `limited_options`     | Array   | Array of strings that overrides the list of all font options. Values in the array must be a hard-coded font name or a font `name` property at any inheritance path. For example `theme.typography.body_text.name`.                                   | `undefined`                                                             |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, FontField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <FontField
          name="font"
          label="Font"
          required={false}
          locked={false}
          loadExternalFonts={true}
          default={{
            size: 12,
            font: "Merriweather",
            font_set: "GOOGLE",
            size_unit: "px",
            color: "#000",
            styles: {},
          }}
          visibility={{
            hidden_subfields: {
              font: true,
              size: true,
            },
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop                | Type    | Description                                                                                                                                                                                                                                          | Default                                                                 |
    | ------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |
    | `default`           | Object  | Font object with settings for size, sizing unit, color, and styles for bold, italic, and underline.                                                                                                                                                  | `{ "size" : 12, "size_unit" : "px", "color" : "#000", "styles" : { } }` |
    | `loadExternalFonts` | Boolean | HubSpot automatically loads the selected web font to the page if the font is selected and referenced by HubL in a stylesheet or in a module. Set this to false, if you are already loading the font to the page, that way the font won't load twice. | `true`                                                                  |
    | `visibility`        | Object  | Using the `hidden_subfields` nested object, you can set a boolean for which controls of the Font field to hide. Subfields include: `font`, `size`, `bold`, `italic`, `underline`, and `color`.                                                       |                                                                         |
    | `variant`           | String  | If using a web font, the variant of the font you want to use. For example, to use the 700-weight version of a font, set this to `"700"`. To use the 400-weight italic version of a font, set this to `"400i"`.                                       |                                                                         |
    | `limitedOptions`    | Array   | Array of strings that overrides the list of all font options. Values in the array must be a hard-coded font name or a font `name` property at any inheritance path. For example `theme.typography.body_text.name`.                                   | `undefined`                                                             |
  </Tab>
</Tabs>

## Form

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Form fields allow a content creator to designate a form in their account. You can then use this to render a form to a page using the [HubL form tag](/cms/reference/hubl/tags/standard-tags#form).

<Frame>
  <img width="340" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-form.png" alt="form field-Aug-21-2020-08-09-55-35-PM" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "id": "idNumber",
      "name": "form_field_name",
      "display_width": null,
      "label": "Form",
      "required": false,
      "locked": false,
      "type": "form",
      "disable_inline_form_editing": true,
      "required_property_types": ["TICKET"],
      "support_all_webinar_types": true,
      "embed_versions": ["v2", "v4"],
      "default": {
        "response_type": "inline",
        "message": "Thanks for submitting the form."
      }
    }
    ```

    | Parameter                     | Type    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
    | ----------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | `default`                     | Object  | An object containing the form submission response details. Includes the following parameters:<ul><li>`response_type`, which can be one of:<ul><li>`inline:` an inline text message. </li><li>`redirect`: redirect the visitor after submission.</li></ul></li><li>`message`: the text to display after form submit.</li></ul><ul><li>`redirect_id`: for redirected forms, set to a HubSpot content ID to redirect submitters to a HubSpot page.</li><li>`redirect_url`: for redirected forms, set to a specific URL to redirect submitters to a page.</li></ul> |
    | `disable_inline_form_editing` | String  | Set the `disable_inline_form_editing` property to `true` to hide all inline form editing controls in the form module. This includes the form fields, submit button text, data privacy and consent options, and CAPTCHA.                                                                                                                                                                                                                                                                                                                                         |
    | `required_property_types`     | Array   | An array that specifies which forms can be selected based on the property types of the form fields. Values include: `"CONTACT"`, `"COMPANY"`, and `"TICKET"`.                                                                                                                                                                                                                                                                                                                                                                                                   |
    | `support_all_webinar_types`   | Boolean | When set to `true`, the form will show a more generic webinar selector that enables selecting Microsoft Teams webinars in addition to GoToWebinar. The form field's values will also change slightly to save `webinar_id` and `webinar_source` instead of `gotowebinar_webinar_key`. You'll need to pass these more generic property values back into the [Form tag](/cms/reference/hubl/tags/standard-tags#form) alongside `gotowebinar_webinar_key`.                                                                                                          |
    | `embed_versions`              | Array   | An array that specifies which forms can be selected based on the version of the form. Values include `"v2"` for legacy forms and `"v4"` for new editor forms.                                                                                                                                                                                                                                                                                                                                                                                                   |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, FormField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <FormField
          id="idNumber"
          name="form_field_name"
          label="Form"
          required={false}
          locked={false}
          disableInlineFormEditing={true}
          requiredPropertyTypes={["TICKET"]}
          supportAllWebinarTypes={true}
          embedVersions={["v2", "v4"]}
          default={{
            response_type: "inline",
            message: "Thanks for submitting the form.",
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop                       | Type    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
    | -------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | `default`                  | Object  | An object containing the form submission response details. Includes the following parameters:<ul><li>`response_type`, which can be one of:<ul><li>`inline:` an inline text message. </li><li>`redirect`: redirect the visitor after submission.</li></ul></li><li>`message`: the text to display after form submit.</li></ul><ul><li>`redirect_id`: for redirected forms, set to a HubSpot content ID to redirect submitters to a HubSpot page.</li><li>`redirect_url`: for redirected forms, set to a specific URL to redirect submitters to a page.</li></ul> |
    | `disableInlineFormEditing` | String  | Set the `disableInlineFormEditing` property to `true` to hide all inline form editing controls in the form module. This includes the form fields, submit button text, data privacy and consent options, and CAPTCHA.                                                                                                                                                                                                                                                                                                                                            |
    | `requiredPropertyTypes`    | Array   | An array that specifies which forms can be selected based on the property types of the form fields. Values include: `"CONTACT"`, `"COMPANY"`, and `"TICKET"`.                                                                                                                                                                                                                                                                                                                                                                                                   |
    | `supportAllWebinarTypes`   | Boolean | When set to `true`, the form will show a more generic webinar selector that enables selecting Microsoft Teams webinars in addition to GoToWebinar. The form field's values will also change slightly to save `webinar_id` and `webinar_source` instead of `gotowebinar_webinar_key`. You'll need to pass these more generic property values back into the [Form tag](/cms/reference/hubl/tags/standard-tags#form) alongside `gotowebinar_webinar_key`.                                                                                                          |
    | `embedVersions`            | Array   | An array that specifies which forms can be selected based on the version of the form. Values include `"v2"` for legacy forms and `"v4"` for new editor forms.                                                                                                                                                                                                                                                                                                                                                                                                   |
  </Tab>
</Tabs>

## Gradient

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/Styles.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json) as a [style field](/cms/reference/fields/overview#style-fields).
</Callout>

This field provides a way for content creators to create and configure gradients. At this time linear gradients support up to 5 color stops. Gradient fields have a `.css` property that returns CSS based on the field's value. [Learn more about the generated CSS property](/cms/reference/fields/overview#generated-css).

<Frame>
  <img width="350" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-gradient-updated.png" alt="Gradient Field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json expandable theme={null}
    {
      "name" : "gradient_field",
      "label" : "Gradient",
      "help_text": "Sets a gradient behind the content",
      "required" : false,
      "type" : "gradient",
      "default" : {
        "colors" : [ {
          "color" : {
            "r" : 241,
            "g" : 194,
            "b" : 51,
            "a" : 1
          }
        }, {
          "color" : {
            "r" : 230,
            "g" : 145,
            "b" : 56,
            "a" : 1
          }
        } ],
        "side_or_corner" : {
          "horizontalSide" : "LEFT",
          "verticalSide" : null
        }
      }
    }
    ```

    | Parameter        | Type   | Description                                                                                                                                                                                                             |
    | ---------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | `default`        | Object | Object containing `side_or_corner` and `colors`.                                                                                                                                                                        |
    | `colors`         | Array  | Array of color stop objects. Each object contains a `color` object with `r`, `g`, `b` (0–255), and `a` (0–1) values. Supports up to 5 color stops.                                                                      |
    | `side_or_corner` | Object | Determines the gradient direction. Contains optional `horizontalSide` (`"LEFT"` \| `"RIGHT"`) and `verticalSide` (`"TOP"` \| `"BOTTOM"`) properties. Omit either property for a purely horizontal or vertical gradient. |
  </Tab>

  <Tab title="React">
    ```jsx expandable theme={null}
    import { ModuleFields, GradientField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <GradientField
          name="gradient_field"
          label="Gradient"
          helpText="Sets a gradient behind the content"
          required={false}
          default={{
            colors: [
              {
                color: {
                  r: 241,
                  g: 194,
                  b: 51,
                  a: 1,
                },
              },
              {
                color: {
                  r: 230,
                  g: 145,
                  b: 56,
                  a: 1,
                },
              },
            ],
            side_or_corner: {
              horizontalSide: "LEFT",
              verticalSide: null,
            },
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop             | Type   | Description                                                                                                                                                                                                             |
    | ---------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
    | `default`        | Object | Object containing `side_or_corner` and `colors`.                                                                                                                                                                        |
    | `colors`         | Array  | Array of color stop objects. Each object contains a `color` object with `r`, `g`, `b` (0–255), and `a` (0–1) values. Supports up to 5 color stops.                                                                      |
    | `side_or_corner` | Object | Determines the gradient direction. Contains optional `horizontalSide` (`"LEFT"` \| `"RIGHT"`) and `verticalSide` (`"TOP"` \| `"BOTTOM"`) properties. Omit either property for a purely horizontal or vertical gradient. |
  </Tab>
</Tabs>

## HubDB Row

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

<Warning>
  **Please note:** [HubDB](/cms/start-building/features/storage/hubdb) requires ***Content Hub*** *Professional* or *Enterprise*.
</Warning>

HubDB Row fields allow a content creator to select an individual row (or rows if using repeater fields) from a defined table. You can then use this field to create user-defined lists, tables, resources, and more.

<Frame>
  <img width="340" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-hubdb-row.png" alt="hubdb-row-field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "hubdbrow_field",
      "label": "HubDB row",
      "required": false,
      "locked": false,
      "table_name_or_id": "3096859",
      "columns_to_fetch": ["name", "price", "desc"],
      "display_columns": ["name", "price", "desc"],
      "display_format": "%0 - %1 :::: %2",
      "type": "hubdbrow",
      "default": {
        "id": 4450468943
      }
    }
    ```

    | Parameter                                | Type             | Description                                                                                                                                                                                                  | Default           |
    | ---------------------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- |
    | `table_name_or_id` <RequiredIndicator /> | String \| Number | The name or ID of the HubDB table. This field is required.                                                                                                                                                   |                   |
    | `columns_to_fetch`                       | Array            | An array of column names to fetch from the table. If left blank, will return all columns in the table.                                                                                                       | `[]`              |
    | `display_columns`                        | Array            | An array of column names to use in choice label. If left blank, will return only the first column in the table.                                                                                              | `[]`              |
    | `display_format`                         | String           | The format you would like the column data to display in the HubDB row selector using the percent symbol and number to designate a column.<br />**Ex:** *%0 (%1) would appear as Column0Value (Column1Value)* | `""`              |
    | `default`                                | Object           | Object containing "id" for setting the default hubdb row.                                                                                                                                                    | `{ "id" : null }` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, HubDBRowField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <HubDBRowField
          name="hubdbrow_field"
          label="HubDB row"
          required={false}
          locked={false}
          tableNameOrId="3096859"
          columnsToFetch={["name", "price", "desc"]}
          displayColumns={["name", "price", "desc"]}
          displayFormat="%0 - %1 :::: %2"
          default={{
            id: 4450468943,
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop                                  | Type   | Description                                                                                                                                                                                                         | Default           |
    | ------------------------------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------- |
    | `tableNameOrId` <RequiredIndicator /> | String | The name or ID of the HubDB table.                                                                                                                                                                                  |                   |
    | `columnsToFetch`                      | Array  | An array of column names to fetch from the table. If left blank, will return all columns in the table.                                                                                                              | `[]`              |
    | `displayColumns`                      | Array  | An array of column names to use in choice label. If left blank, will return only the first column in the table.                                                                                                     | `[]`              |
    | `displayFormat`                       | String | The format you would like the column data to display in the HubDB row selector using the percent symbol and number to designate a column.<br />**Example:** `%0 (%1)` would appear as `Column0Value (Column1Value)` | `""`              |
    | `default`                             | Object | Object containing "id" for setting the default hubdb row.                                                                                                                                                           | `{ "id" : null }` |
  </Tab>
</Tabs>

## HubDB Table

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

<Warning>
  **Please note:** [HubDB](/cms/start-building/features/storage/hubdb) requires ***Content Hub*** *Professional* or *Enterprise*.
</Warning>

HubDB Table fields allow a content creator to designate a HubDB in their account. Returns the table ID, which you can use with the [HubDB HubL functions](/cms/start-building/features/storage/hubdb#access-hubdb-data-using-hubl).

<Frame>
  <img width="340" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-hubdb-table.png" alt="HubDB field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "hubdbtable_field",
      "label": "HubDB table",
      "required": false,
      "locked": false,
      "type": "hubdbtable",
      "default": 2010782
    }
    ```

    | Parameter | Type   | Description    | Default |
    | --------- | ------ | -------------- | ------- |
    | `default` | String | HubDB table ID | `null`  |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, HubDBTableField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <HubDBTableField
        name="hubdbtable_field"
        label="HubDB table"
        required={false}
        locked={false}
        default={2010782}
        />
      </ModuleFields>
    );
    ```

    | Prop      | Type   | Description    | Default |
    | --------- | ------ | -------------- | ------- |
    | `default` | String | HubDB table ID | `null`  |
  </Tab>
</Tabs>

## Icon

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/Styles.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json) as a [style field](/cms/reference/fields/overview#style-fields).
</Callout>

Icon fields provide an icon picker UI to make it easier for content creators to add icons to your modules. The Icon field is preloaded with FontAwesome Icons.

<Frame>
  <img width="350" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-icon.png" alt="icon field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "icon_field",
      "label": "Icon",
      "required": false,
      "locked": false,
      "icon_set": "fontawesome-6.4.2",
      "type": "icon",
      "default": {
        "name": "accessible-icon",
        "unicode": "f368",
        "type": "REGULAR"
      }
    }
    ```

    | Parameter  | Type   | Description                                                                                                                                    | Default              |
    | ---------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
    | `default`  | Object | The default icon to display.                                                                                                                   |                      |
    | `icon_set` | String | The FontAwesome icon set to use. Can be one of:<ul><li>`fontawesome-6.4.2`</li><li>`fontawesome-5.14.0`</li><li>`fontawesome-5.0.10`</li></ul> | `fontawesome-5.0.10` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, IconField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <IconField
          name="icon_field"
          label="Icon"
          required={false}
          locked={false}
          iconSet="fontawesome-6.4.2"
          default={{
            name: "accessible-icon",
            unicode: "f368",
            type: "REGULAR",
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop      | Type   | Description                                                                                                                                          | Default              |
    | --------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------- |
    | `default` | Object | Icon object                                                                                                                                          |                      |
    | `iconSet` | String | The FontAwesome icon set to use. Possible values are:<ul><li>`fontawesome-6.4.2`</li><li>`fontawesome-5.14.0`</li><li>`fontawesome-5.0.10`</li></ul> | `fontawesome-5.0.10` |
  </Tab>
</Tabs>

## Image

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/Styles.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json) as a [style field](/cms/reference/fields/overview#style-fields). Only use image fields as style fields when the image is purely presentational and does not convey meaning. For background images, use the [background image](#background-image) field instead.
</Callout>

Image fields provide an easy interface for content creators to add images to a module or theme. Image fields provide a file picker interface that lists images from the File Manager. Since images can be used and displayed in different ways, developers can limit the sizing options available to the content creator in the UI as well as allow for [lazy-loading of images](/cms/best-practices/testing-staging-performance/lazy-loading).

<Frame>
  <img width="350" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-image.png" alt="Image Field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "image_field",
      "label": "Image",
      "required": false,
      "locked": false,
      "responsive": true,
      "resizable": true,
      "show_loading": false,
      "type": "image",
      "default": {
        "size_type": "exact",
        "src": "",
        "alt": "image-alt-text",
        "loading": "lazy",
        "width": 128,
        "height": 128,
        "max_width": 128,
        "max_height": 128
      }
    }
    ```

    | Parameter      | Type    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Default                                                                     |
    | -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
    | `default`      | Object  | Sets properties for image sizing, alt-text, and more. Can contain the following properties: <ul><li>`size_type`: whether the image is automatically or manually sized:<ul><li>`"auto"`: HubSpot will automatically adjust the size of the image based on its original dimensions.</li><li>`"auto_custom_max"`: HubSpot will automatically adjust the size of the image with maximum dimensions set using the `"max_height"` and `"max_width"` properties.</li><li>`"exact":` HubSpot will size the image based on the dimensions set using the `"height"` and `"width"` properties.</li></ul></li><li>`src`: the URL of the default image. Must be an absolute path to an image.</li><li>`alt`: the image's default alt-text.</li><li>`loading`: the image's [lazy loading options](/cms/best-practices/testing-staging-performance/lazy-loading). Can be set as `"disabled"` (default), `"eager"`, or `"lazy"`.</li></ul> | `{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }` |
    | `responsive`   | Boolean | determines if the image is to act responsively or have a fixed height and width.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `true`                                                                      |
    | `resizable`    | Boolean | When set to `false`, users won't be able to resize the image in the editor.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `true`                                                                      |
    | `show_loading` | Boolean | Determines if the controls for choosing to [lazy load](/cms/best-practices/testing-staging-performance/lazy-loading) the image are shown in the page editor.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`                                                                     |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, ImageField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <ImageField
          name="image_field"
          label="Image"
          required={false}
          locked={false}
          responsive={true}
          resizable={true}
          showLoading={false}
          default={{
            size_type: "exact",
            src: "",
            alt: "image-alt-text",
            loading: "lazy",
            width: 128,
            height: 128,
            max_width: 128,
            max_height: 128,
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop          | Type    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Default                                                                     |
    | ------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
    | `default`     | Object  | Sets properties for image sizing, alt-text, and more. Can contain the following properties: <ul><li>`size_type`: whether the image is automatically or manually sized:<ul><li>`"auto"`: HubSpot will automatically adjust the size of the image based on its original dimensions.</li><li>`"auto_custom_max"`: HubSpot will automatically adjust the size of the image with maximum dimensions set using the `"max_height"` and `"max_width"` properties.</li><li>`"exact":` HubSpot will size the image based on the dimensions set using the `"height"` and `"width"` properties.</li></ul></li><li>`src`: the URL of the default image. Must be an absolute path to an image.</li><li>`alt`: the image's default alt-text.</li><li>`loading`: the image's [lazy loading options](/cms/best-practices/testing-staging-performance/lazy-loading). Can be set as `"disabled"` (default), `"eager"`, or `"lazy"`.</li></ul> | `{ "size_type" : "auto", "src" : "", "alt" : null, "loading": "disabled" }` |
    | `responsive`  | Boolean | determines if the image is to act responsively or have a fixed height and width.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | `true`                                                                      |
    | `resizable`   | Boolean | When set to `false`, users won't be able to resize the image in the editor.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | `true`                                                                      |
    | `showLoading` | Boolean | Determines if the controls for choosing to [lazy load](/cms/best-practices/testing-staging-performance/lazy-loading) the image are shown in the page editor.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | `false`                                                                     |
  </Tab>
</Tabs>

## Link

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Link fields provide an easy interface for content creators to provide links to URLs and email addresses.

This field is similar to the [URL](#url) field, but includes more options for configuring open nofollow options.

<Frame>
  <img width="345" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-link.png" alt="link field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "link_field",
      "display_width": null,
      "label": "Link",
      "required": false,
      "locked": false,
      "supported_types": [
        "EXTERNAL",
        "CONTENT",
        "FILE",
        "EMAIL_ADDRESS",
        "BLOG",
        "CALL_TO_ACTION",
        "PHONE_NUMBER",
        "WHATSAPP_NUMBER",
        "PAYMENT"
      ],
      "show_advanced_rel_options": true,
      "type": "link",
      "default": {
        "url": {
          "content_id": null,
          "type": "EXTERNAL",
          "href": ""
        },
        "open_in_new_tab": false,
        "no_follow": false
      }
    }
    ```

    | Parameter                   | Type    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                                                                                                                                                                        |
    | --------------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
    | `default`                   | Object  | The default URL and link open behavior. This object includes:<ul><li>A `url` object which contains:<ul><li>`content_id`: if linking to HubSpot content, the ID of that content. Set to `null` if linking to external content.</li><li>`type`: the type of URL. Learn more about supported types below.</li><li>`href`: the URL of the content. When linking to HubSpot content, set this to `null` and use `content_id` instead.</li></ul></li></ul> | `{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }` |
    | `supported_types`           | Array   | The types of links that content creators can select. Remove types from the list that you don't want content creators to have access to set. Valid types include:<ul><li>`EXTERNAL`</li><li>`CONTENT`</li><li>`FILE`</li><li>`EMAIL_ADDRESS`</li><li>`BLOG`</li><li>`CALL_TO_ACTION`</li><li>`PHONE_NUMBER`</li><li>`WHATSAPP_NUMBER`</li><li>`PAYMENT`</li></ul>                                                                                     | `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]`                                                   |
    | `show_advanced_rel_options` | Boolean | By default, content creators will only be able to select the `no_follow` option.When set to `true`, content creators can also select:<ul><li>`sponsored`: a sponsored link, such as a paid ad link. </li><li>`user_generated_content`: content generated by users, such as forums.</li></ul>Learn more about [link attributes](https://moz.com/blog/nofollow-sponsored-ugc).                                                                         | `false`                                                                                                                                                                        |
    | `placeholder`               | String  | Placeholder text shown in the link field when no value has been set.                                                                                                                                                                                                                                                                                                                                                                                 |                                                                                                                                                                                |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, LinkField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <LinkField
          name="link_field"
          label="Link"
          required={false}
          locked={false}
          supportedTypes={[
            "EXTERNAL",
            "CONTENT",
            "FILE",
            "EMAIL_ADDRESS",
            "BLOG",
            "CALL_TO_ACTION",
            "PHONE_NUMBER",
            "WHATSAPP_NUMBER",
            "PAYMENT",
          ]}
          showAdvancedRelOptions={true}
          default={{
            url: {
              content_id: null,
              type: "EXTERNAL",
              href: "",
            },
            open_in_new_tab: false,
            no_follow: false,
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop                     | Type    | Description                                                                                                                                                                                                                                                                                                                                                                                                                                          | Default                                                                                                                                                                        |
    | ------------------------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
    | `default`                | Object  | The default URL and link open behavior. This object includes:<ul><li>A `url` object which contains:<ul><li>`content_id`: if linking to HubSpot content, the ID of that content. Set to `null` if linking to external content.</li><li>`type`: the type of URL. Learn more about supported types below.</li><li>`href`: the URL of the content. When linking to HubSpot content, set this to `null` and use `content_id` instead.</li></ul></li></ul> | `{ "url" : { "content_id" : null, "type" : "EXTERNAL", "href" : "" }, "open_in_new_tab" : false, "no_follow" : false, "sponsored" : false, "user_generated_content" : false }` |
    | `supportedTypes`         | Array   | The types of links that content creators can select. Remove types from the list that you don't want content creators to have access to set. Valid types include:<ul><li>`EXTERNAL`</li><li>`CONTENT`</li><li>`FILE`</li><li>`EMAIL_ADDRESS`</li><li>`BLOG`</li><li>`CALL_TO_ACTION`</li><li>`PHONE_NUMBER`</li><li>`WHATSAPP_NUMBER`</li><li>`PAYMENT`</li></ul>                                                                                     | `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "CALL_TO_ACTION", "PHONE_NUMBER", "WHATSAPP_NUMBER", "PAYMENT" ]`                                                   |
    | `showAdvancedRelOptions` | Boolean | By default, content creators will only be able to select the `no_follow` option.When set to `true`, content creators can also select:<ul><li>`sponsored`: a sponsored link, such as a paid ad link. </li><li>`user_generated_content`: content generated by users, such as forums.</li></ul>Learn more about [link attributes](https://moz.com/blog/nofollow-sponsored-ugc).                                                                         | `false`                                                                                                                                                                        |
    | `placeholder`            | String  | Placeholder text shown in the link field when no value has been set.                                                                                                                                                                                                                                                                                                                                                                                 |                                                                                                                                                                                |
  </Tab>
</Tabs>

## Logo

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Logo fields provide a way for content creators to specify logo images to use in a page, defaulting to the domain's logo. This is useful for site headers and footers that may contain the company logo. Logo fields also allow for [lazy loading](/cms/best-practices/testing-staging-performance/lazy-loading).

<Frame>
  <img width="340" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-logo.png" alt="logo field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "logo",
      "label": "Logo",
      "required": false,
      "locked": false,
      "type": "logo",
      "show_loading": true,
      "default": {
        "override_inherited_src": false,
        "src": null,
        "alt": null,
        "loading": "lazy"
      }
    }
    ```

    | Parameter      | Type    | Description                                                                                                                                                                                                                                                                                | Default                                                                                                                              |
    | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
    | `show_loading` | Boolean | Determines if the controls for choosing to [lazy load](/cms/best-practices/testing-staging-performance/lazy-loading) the image are shown in the page editor.                                                                                                                               | `false`                                                                                                                              |
    | `default`      | Object  | Logo object. If `show_loading` is set to `true`, you can include a `loading` property to set the image's [lazy loading options](/cms/best-practices/testing-staging-performance/lazy-loading). Options include:<ul><li>`"disabled"` (default)</li><li>`"eager"`</li><li>`"lazy"`</li></ul> | `{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, LogoField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <LogoField
          name="logo"
          label="Logo"
          required={false}
          locked={false}
          showLoading={true}
          default={{
            override_inherited_src: false,
            src: null,
            alt: null,
            loading: "lazy",
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop          | Type    | Description                                                                                                                                                                                                                                                                                | Default                                                                                                                              |
    | ------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
    | `showLoading` | Boolean | Determines if the controls for choosing to [lazy load](/cms/best-practices/testing-staging-performance/lazy-loading) the image are shown in the page editor.                                                                                                                               | `false`                                                                                                                              |
    | `default`     | Object  | Logo object. If `show_loading` is set to `true`, you can include a `loading` property to set the image's [lazy loading options](/cms/best-practices/testing-staging-performance/lazy-loading). Options include:<ul><li>`"disabled"` (default)</li><li>`"eager"`</li><li>`"lazy"`</li></ul> | `{ override_inherited_src: false, src: "", alt: null, width: null, height: null, loading: "disabled" suppress_company_name: false }` |
  </Tab>
</Tabs>

## Menu

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Menu fields provide an easy interface for content creators to create, edit and select a [navigation menu](/cms/start-building/building-blocks/modules/menus-and-navigation) that is re-usable on other pages. This field is great for use in menus that are used across multiple pages like main navigation and footer navigation and other [global content](/cms/start-building/building-blocks/global-content). Use this field in tandem with the [menu tag](/cms/reference/hubl/tags/standard-tags#menu) or [menu() function](/cms/reference/hubl/functions#menu), to render a menu inside of your module.

For menus that don't make sense to re-use on other pages, like a table of contents menu, use the [simple menu field](#simple-menu).

<Frame>
  <img width="335" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-menu.png" alt="menu field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "menu",
      "label": "Menu",
      "required": false,
      "locked": false,
      "type": "menu",
      "default": 12345678911
    }
    ```

    | Parameter | Type    | Description                                                                                                                                                                                | Default |
    | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
    | `default` | Integer | The [menu ID](/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id) for the menu. The default value of `null`, defaults to the default menu under navigation. | `null`  |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, MenuField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <MenuField name="menu" label="Menu" required={false} locked={false} default={12345678911} />
      </ModuleFields>
    );
    ```

    | Prop      | Type    | Description                                                                                                                                                                                | Default |
    | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
    | `default` | Integer | The [menu ID](/cms/start-building/building-blocks/modules/menus-and-navigation#get-your-menu-id) for the menu. The default value of `null`, defaults to the default menu under navigation. | `null`  |
  </Tab>
</Tabs>

## Number

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/Styles.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json) as a [style field](/cms/reference/fields/overview#style-fields).
</Callout>

Number fields provide an easy interface for content creators to enter in or adjust numerical values and options. This can be used for creating percentage based items or anything where numbers are needed for input.

<Frame>
  <img width="340" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-number.png" alt="Number field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "number_field",
      "label": "Number",
      "required": false,
      "locked": false,
      "display": "slider",
      "min": 1,
      "max": 10,
      "step": 1,
      "type": "number",
      "prefix": "",
      "suffix": "",
      "default": null,
      "placeholder": "50"
    }
    ```

    | Parameter     | Type   | Description                                                                                                                                        | Default  |
    | ------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
    | `default`     | Number | A default number to be used.                                                                                                                       | `null`   |
    | `display`     | String | Controls the appearance of the number field in the editor. Accepted values: `text` (standard text input) or `slider` (a draggable slider control). | `"text"` |
    | `min`         | Number | The minimum value allowed in the field.                                                                                                            |          |
    | `max`         | Number | The maximum value allowed in the field.                                                                                                            |          |
    | `step`        | Number | The increment amount when using the slider display or stepping controls.                                                                           |          |
    | `prefix`      | String | Added as a prefix to the number field.                                                                                                             |          |
    | `suffix`      | String | Added as a suffix to the number field.                                                                                                             |          |
    | `placeholder` | String | Adds a placeholder value to the field.                                                                                                             |          |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, NumberField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <NumberField
          name="number_field"
          label="Number"
          required={false}
          locked={false}
          display="slider"
          min={1}
          max={10}
          step={1}
          prefix=""
          suffix=""
          default={null}
          placeholder="50"
        />
      </ModuleFields>
    );
    ```

    | Prop          | Type   | Description                                                                                                                                        | Default  |
    | ------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
    | `default`     | Number | A default number to be used.                                                                                                                       | `null`   |
    | `display`     | String | Controls the appearance of the number field in the editor. Accepted values: `text` (standard text input) or `slider` (a draggable slider control). | `"text"` |
    | `min`         | Number | The minimum value allowed in the field.                                                                                                            |          |
    | `max`         | Number | The maximum value allowed in the field.                                                                                                            |          |
    | `step`        | Number | The increment amount when using the slider display or stepping controls.                                                                           |          |
    | `prefix`      | String | Added as a prefix to the number field.                                                                                                             |          |
    | `suffix`      | String | Added as a suffix to the number field.                                                                                                             |          |
    | `placeholder` | String | Adds a placeholder value to the field.                                                                                                             |          |
  </Tab>
</Tabs>

<Info>
  Suffix and prefix parameters are for display purposes in the content editor and have no effect on the numerical value of the field.
</Info>

## Page

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Page fields provide an interface for content creators to select site pages and landing pages.

The value returned by a page field is the page ID of the selected page. When used in tandem with the [content\_by\_id](/cms/reference/hubl/functions#content-by-id) or [content\_by\_ids](/cms/reference/hubl/functions#content-by-ids) functions, you can use data from the selected pages in the current page.

<Frame>
  <img width="335" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-page.png" alt="Page field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "page_field",
      "label": "Page",
      "help_text": "Pulls data from the selected page.",
      "required": false,
      "locked": false,
      "placeholder": "Page to pull from",
      "type": "page",
      "default": null
    }
    ```

    | Parameter | Type    | Description                       | Default |
    | --------- | ------- | --------------------------------- | ------- |
    | `default` | Integer | A default page ID to be selected. | `null`  |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, PageField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <PageField
          name="page_field"
          label="Page"
          helpText="Pulls data from the selected page."
          required={false}
          locked={false}
          placeholder="Page to pull from"
          default={null}
        />
      </ModuleFields>
    );
    ```

    | Prop      | Type    | Description                       | Default |
    | --------- | ------- | --------------------------------- | ------- |
    | `default` | Integer | A default page ID to be selected. | `null`  |
  </Tab>
</Tabs>

## Rich text

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Rich text fields provide content creators with a WYSIWYG text editor experience. When a rich text field's value is printed it is printed as HTML. When you do not want content creators to have formatting capabilities use [text fields](#text).

<Frame>
  <img width="350" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-rich-text.png" alt="Rich Text field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "description",
      "label": "Description",
      "required": false,
      "locked": false,
      "type": "richtext",
      "default": null
    }
    ```

    | Parameter          | Type   | Description                                                                                                                                                                            | Default |
    | ------------------ | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default`          | String | string of content to be displayed supports HTML. Note: You cannot use the `get_asset_url` [function](/cms/reference/hubl/functions#get-asset-url) within this default property.        | `""`    |
    | `enabled_features` | Array  | An array of items that allows you to [configure the Rich Text Editor Toolbar](/cms/reference/fields/module-theme-fields#rich-text) and what options are available for content editors. |         |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, RichTextField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <RichTextField name="description" label="Description" required={false} locked={false} default={null} />
      </ModuleFields>
    );
    ```

    | Prop              | Type   | Description                                                                                                                                                                            | Default |
    | ----------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default`         | String | string of content to be displayed supports HTML. Note: You cannot use the `get_asset_url` [function](/cms/reference/hubl/functions#get-asset-url) within this default property.        | `""`    |
    | `enabledFeatures` | Array  | An array of items that allows you to [configure the Rich Text Editor Toolbar](/cms/reference/fields/module-theme-fields#rich-text) and what options are available for content editors. |         |
  </Tab>
</Tabs>

## Simple menu

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Simple menu fields provide an easy interface for content creators to create a [navigation menu](/cms/start-building/building-blocks/modules/menus-and-navigation) that is not re-usable on other pages. For menus that should be reusable, use the [menu field](#menu). A time you may want this is for a table of contents menu that links to headings on very long pages, or a list of links to content that only makes sense to have on the current page.

<Frame>
  <img width="335" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-menu.png" alt="Simple menu field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json expandable theme={null}
    {
      "name": "toc_menu",
      "label": "Table of Contents",
      "required": false,
      "locked": false,
      "type": "simplemenu",
      "default": [
        {
          "isPublished": false,
          "pageLinkId": null,
          "pageLinkName": null,
          "isDeleted": null,
          "categoryId": null,
          "subCategory": null,
          "contentType": null,
          "state": null,
          "linkLabel": "Why is product marketing important?",
          "linkUrl": null,
          "linkParams": null,
          "linkTarget": null,
          "type": "NO_LINK",
          "children": [
            {
              "isPublished": false,
              "pageLinkId": null,
              "pageLinkName": null,
              "isDeleted": null,
              "categoryId": null,
              "subCategory": null,
              "contentType": null,
              "state": null,
              "linkLabel": "Product Marketing Responsibilities",
              "linkUrl": "#product-marketing-responsibilities",
              "linkParams": null,
              "linkTarget": null,
              "type": "URL_LINK",
              "children": []
            },
            {
              "isPublished": false,
              "pageLinkId": null,
              "pageLinkName": null,
              "isDeleted": null,
              "categoryId": null,
              "subCategory": null,
              "contentType": null,
              "state": null,
              "linkLabel": "1. Identify the buyer personas and target audience for your product.",
              "linkUrl": "#step1",
              "linkParams": null,
              "linkTarget": null,
              "type": "URL_LINK",
              "children": []
            },
            {
              "isPublished": false,
              "pageLinkId": null,
              "pageLinkName": null,
              "isDeleted": null,
              "categoryId": null,
              "subCategory": null,
              "contentType": null,
              "state": null,
              "linkLabel": "2. Successfully create, manage and carry out your product marketing strategy.",
              "linkUrl": "#step2",
              "linkParams": null,
              "linkTarget": null,
              "type": "URL_LINK",
              "children": []
            }
          ]
        },
        {
          "isPublished": false,
          "pageLinkId": null,
          "pageLinkName": null,
          "isDeleted": null,
          "categoryId": null,
          "subCategory": null,
          "contentType": null,
          "state": null,
          "linkLabel": "How HubSpot can help",
          "linkUrl": "https://hubspot.com",
          "linkParams": null,
          "linkTarget": null,
          "type": "URL_LINK",
          "children": []
        }
      ]
    }
    ```

    | Parameter | Type             | Description                                | Default |
    | --------- | ---------------- | ------------------------------------------ | ------- |
    | `default` | Array of objects | JSON structure for menu and menu children. | `[]`    |
  </Tab>

  <Tab title="React">
    ```jsx expandable theme={null}
    import { ModuleFields, SimpleMenuField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <SimpleMenuField
          name="simple_menu"
          label="Simple menu"
          required={false}
          default={[
            {
              isPublished: false,
              pageLinkId: null,
              pageLinkName: null,
              isDeleted: null,
              categoryId: null,
              subCategory: null,
              contentType: null,
              state: null,
              linkLabel: "Why is product marketing important?",
              linkUrl: null,
              linkParams: null,
              linkTarget: null,
              type: "NO_LINK",
              children: [
                {
                  isPublished: false,
                  pageLinkId: null,
                  pageLinkName: null,
                  isDeleted: null,
                  categoryId: null,
                  subCategory: null,
                  contentType: null,
                  state: null,
                  linkLabel: "Product Marketing Responsibilities",
                  linkUrl: "#product-marketing-responsibilities",
                  linkParams: null,
                  linkTarget: null,
                  type: "URL_LINK",
                  children: [],
                },
                {
                  isPublished: false,
                  pageLinkId: null,
                  pageLinkName: null,
                  isDeleted: null,
                  categoryId: null,
                  subCategory: null,
                  contentType: null,
                  state: null,
                  linkLabel: "1. Identify the buyer personas and target audience for your product.",
                  linkUrl: "#step1",
                  linkParams: null,
                  linkTarget: null,
                  type: "URL_LINK",
                  children: [],
                },
                {
                  isPublished: false,
                  pageLinkId: null,
                  pageLinkName: null,
                  isDeleted: null,
                  categoryId: null,
                  subCategory: null,
                  contentType: null,
                  state: null,
                  linkLabel: "2. Successfully create, manage and carry out your product marketing strategy.",
                  linkUrl: "#step2",
                  linkParams: null,
                  linkTarget: null,
                  type: "URL_LINK",
                  children: [],
                },
              ],
            },
            {
              isPublished: false,
              pageLinkId: null,
              pageLinkName: null,
              isDeleted: null,
              categoryId: null,
              subCategory: null,
              contentType: null,
              state: null,
              linkLabel: "How HubSpot can help",
              linkUrl: "https://hubspot.com",
              linkParams: null,
              linkTarget: null,
              type: "URL_LINK",
              children: [],
            },
          ]}
        />
      </ModuleFields>
    );
    ```

    | Prop      | Type             | Description                                | Default |
    | --------- | ---------------- | ------------------------------------------ | ------- |
    | `default` | Array of objects | JSON structure for menu and menu children. | `[]`    |
  </Tab>
</Tabs>

## Spacing

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/Styles.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json) as a [style field](/cms/reference/fields/overview#style-fields).
</Callout>

This field provides a user interface (UI) for content creators to set padding and margin. Spacing fields have a `.css` property that returns CSS based on the field's value. [Learn more about the generated CSS property.](/cms/reference/fields/overview#generated-css)

<Frame>
  <img width="350" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-spacing.png" alt="screenshot of spacing style field expanded in page editor" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json expandable theme={null}
    {
      "name": "img_spacing",
      "label": "Spacing around image",
      "required": false,
      "type": "spacing",
      "limits": {
        "padding": {
          "top": {
            "max": 50,
            "min": 25,
            "units": ["px", "pt", "em"]
          },
          "left": {
            "max": 50,
            "units": ["px", "pt", "em"]
          },
          "bottom": {
            "max": 50,
            "units": ["px", "pt", "em"]
          }
        },
        "margin": {
          "top": {
            "max": 50,
            "min": 25,
            "units": ["px", "pt", "em"]
          },
          "bottom": {
            "max": 25,
            "units": ["Q", "rem", "em"]
          }
        }
      },
      "default": {
        "padding": {
          "top": {
            "value": 57,
            "units": "px"
          },
          "bottom": {
            "value": 57,
            "units": "px"
          },
          "left": {
            "value": 57,
            "units": "px"
          },
          "right": {
            "value": 57,
            "units": "px"
          }
        },
        "margin": {
          "top": {
            "value": 20,
            "units": "px"
          },
          "bottom": {
            "value": 20,
            "units": "px"
          }
        }
      }
    }
    ```

    | Parameter | Type   | Description                                                                                                                                                                                                                                                                                                                                        | Default |
    | --------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default` | Object | Sets the default spacing values.Contains `padding` and `margin` objects:<ul><li>`padding`: can contain `top`, `right`, `bottom`, `left` objects</li><li>`margin`: can contain `top` and `bottom` objects</li></ul>Use `units` to set the units that a content creator can use in HubSpot. Learn more about units below.                            | `{}`    |
    | `limits`  | Object | Sets the guidelines for `min` and `max` amount of spacing. Contains `padding` and `margin` objects:<ul><li>`padding`: can contain `top`, `right`, `bottom`, `left` objects</li><li>`margin`: can contain `top` and `bottom` objects</li></ul>Use `units` to set the units that a content creator can use in HubSpot. Learn more about units below. |         |
  </Tab>

  <Tab title="React">
    ```jsx expandable theme={null}
    import { ModuleFields, SpacingField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <SpacingField
          name="img_spacing"
          label="Spacing around image"
          required={false}
          limits={{
            padding: {
              top: { max: 50, min: 25, units: ["px", "pt", "em"] },
              left: { max: 50, units: ["px", "pt", "em"] },
              bottom: { max: 50, units: ["px", "pt", "em"] },
            },
            margin: {
              top: { max: 50, min: 25, units: ["px", "pt", "em"] },
              bottom: { max: 25, units: ["Q", "rem", "em"] },
            },
          }}
          default={{
            padding: {
              top: { value: 57, units: "px" },
              bottom: { value: 57, units: "px" },
              left: { value: 57, units: "px" },
              right: { value: 57, units: "px" },
            },
            margin: {
              top: { value: 20, units: "px" },
              bottom: { value: 20, units: "px" },
            },
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop      | Type   | Description                                                                                                                                                                                                                                                                                                                                        | Default |
    | --------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default` | Object | Sets the default spacing values.Contains `padding` and `margin` objects:<ul><li>`padding`: can contain `top`, `right`, `bottom`, `left` objects</li><li>`margin`: can contain `top` and `bottom` objects</li></ul>Use `units` to set the units that a content creator can use in HubSpot. Learn more about units below.                            | `{}`    |
    | `limits`  | Object | Sets the guidelines for `min` and `max` amount of spacing. Contains `padding` and `margin` objects:<ul><li>`padding`: can contain `top`, `right`, `bottom`, `left` objects</li><li>`margin`: can contain `top` and `bottom` objects</li></ul>Use `units` to set the units that a content creator can use in HubSpot. Learn more about units below. |         |
  </Tab>
</Tabs>

When using the spacing field, please note the following:

* You must include a `units` list when setting a `min` or `max`.
* The `units` property supports the following unit types: `%`, `ch`, `em`, `ex`, `in`, `lh`, `pc`, `pt`, `px`, `Q`, `rem`, `vh`, `vmax`, `vmin`, and `vw`.
* When a content creator edits all padding together, HubSpot will use the highest `min` value and the lowest `max` value. In addition, only the units shared by all sides will be available to the content creator.

## Tag

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Tag fields provide a blog tag picker for content creators. This tag picker returns a blog tag ID which can then be used in blog tag related functions such as [Blog Tag URL](/cms/reference/hubl/functions#blog-tag-url) and [Blog Recent Tag Posts](/cms/reference/hubl/functions#blog-recent-tag-posts).

<Frame>
  <img width="340" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-tag.png" alt="tag field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "id": "c3395cd3-8e60-7e47-2f1b-b7ccf4d669c9",
      "name": "blog_tag",
      "label": "Blog Tag",
      "required": false,
      "locked": false,
      "tag_value": "SLUG",
      "type": "tag",
      "default": null
    }
    ```

    | Parameter   | Type   | Description                                                                                                                                                                                                                                       | Default |
    | ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default`   | String | The ID of the tag.                                                                                                                                                                                                                                | `null`  |
    | `tag_value` | String | The output value. Can be one of:<ul><li>`ALL`: an object containing the name, unique ID, and URL slug of the tag.</li><li>`ID`: the unique ID of the tag.</li><li>`NAME`: the name of the tag.</li><li>`SLUG`: the URL slug of the tag.</li></ul> | `SLUG`  |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, TagField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <TagField name="blog_tag" label="Blog Tag" tagValue="SLUG" required={false} locked={false} default={null} />
      </ModuleFields>
    );
    ```

    | Prop       | Type   | Description                                                                                                                                                                                                                                       | Default |
    | ---------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default`  | String | The ID of the tag.                                                                                                                                                                                                                                | `null`  |
    | `tagValue` | String | The output value. Can be one of:<ul><li>`ALL`: an object containing the name, unique ID, and URL slug of the tag.</li><li>`ID`: the unique ID of the tag.</li><li>`NAME`: the name of the tag.</li><li>`SLUG`: the URL slug of the tag.</li></ul> | `SLUG`  |
  </Tab>
</Tabs>

## Text

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Text fields provide content creators a simple text editing experience with no rich text functionality. Text fields initially show as a single line, but can actually expand to be text areas, supporting multiple lines. Use these when you do not want content creators to have control over formatting. If you do want to provide formatting controls use [rich text fields](#rich-text).

<Frame>
  <img width="345" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-text.png" alt="text field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "product_name",
      "label": "Product Name",
      "required": false,
      "locked": false,
      "validation_regex": "",
      "allow_new_line": false,
      "show_emoji_picker": false,
      "type": "text",
      "default": ""
    }
    ```

    | Parameter           | Type    | Description                                                                                                                           | Default |
    | ------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default`           | String  | Text string.                                                                                                                          | `""`    |
    | `validation_regex`  | String  | A regex pattern used to validate the field value. If the value does not match the pattern, a validation error is shown in the editor. | `""`    |
    | `allow_new_line`    | Boolean | When `true`, the text field expands to a textarea that supports multiple lines of input.                                              | `false` |
    | `show_emoji_picker` | Boolean | When `true`, displays an emoji picker button in the field for content creators to insert emoji characters.                            | `false` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, TextField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <TextField
          name="product_name"
          label="Product Name"
          required={false}
          locked={false}
          validationRegex=""
          allowNewLine={false}
          showEmojiPicker={false}
          default=""
        />
      </ModuleFields>
    );
    ```

    | Prop              | Type    | Description                                                                                                                           | Default |
    | ----------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default`         | String  | Text string.                                                                                                                          | `""`    |
    | `validationRegex` | String  | A regex pattern used to validate the field value. If the value does not match the pattern, a validation error is shown in the editor. | `""`    |
    | `allowNewLine`    | Boolean | When `true`, the text field expands to a textarea that supports multiple lines of input.                                              | `false` |
    | `showEmojiPicker` | Boolean | When `true`, displays an emoji picker button in the field for content creators to insert emoji characters.                            | `false` |
  </Tab>
</Tabs>

## Text Alignment

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/Styles.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json) as a [style field](/cms/reference/fields/overview#style-fields).
</Callout>

This field provides content creators a way to align text content within a container. This should not be used for aligning other assets as there is a [field type specifically for that](#alignment).

<Frame>
  <img width="150" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-textalignment.png" alt="Text Alignment field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "heading_align",
      "label": "Heading alignment",
      "required": false,
      "type": "textalignment",
      "default": {
        "text_align": "CENTER"
      }
    }
    ```

    | Parameter    | Type   | Description                                                                                                                 | Default |
    | ------------ | ------ | --------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default`    | Object | Object containing `text_align`.                                                                                             |         |
    | `text_align` | String | Determines the default alignment. Can be one of:<ul><li>`LEFT`</li><li>`CENTER`</li><li>`RIGHT`</li><li>`JUSTIFY`</li></ul> |         |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, TextAlignmentField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <TextAlignmentField
          name="heading_align"
          label="Heading alignment"
          required={false}
          default={{
            text_align: "LEFT",
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop         | Type   | Description                                                                                                                 | Default |
    | ------------ | ------ | --------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default`    | Object | Object containing `text_align`.                                                                                             |         |
    | `text_align` | String | Determines the default alignment. Can be one of:<ul><li>`LEFT`</li><li>`CENTER`</li><li>`RIGHT`</li><li>`JUSTIFY`</li></ul> |         |
  </Tab>
</Tabs>

## URL

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

URL fields provide a similar experience to link fields. Providing a UI for content creators to add links. URL fields, however, do not show a UI for open in a new window, nor tell search engines not to follow. Use this field when you as a developer want to dictate the values for that. If you want the user to have control, use [link fields](#link) instead.

<Frame>
  <img width="343" src="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-url.png" alt="URL field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "url",
      "label": "URL",
      "required": false,
      "locked": false,
      "supported_types": ["EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "PHONE_NUMBER", "WHATSAPP_NUMBER"],
      "type": "url",
      "default": {
        "content_id": null,
        "href": "http://example.com",
        "type": "EXTERNAL"
      }
    }
    ```

    | Parameter         | Type   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default                                                      |
    | ----------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
    | `default`         | Object | URL object, with type, href and content ID (if content is a page or post on HubSpot)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }`  |
    | `supported_types` | Array  | list of the types of links this field allows content creators to select. Remove types from the list that you don't want content creators to have access to set. Types include:<ul><li>`EXTERNAL`: renders a text input field for an external URL.</li><li>`CONTENT`: renders a dropdown menu containing the account's website and landing pages.</li><li>`FILE`: renders a file selector.</li><li>`EMAIL_ADDRESS`: renders a text input field for an email address.</li><li>`BLOG`: renders a dropdown menu containing the account's blog listing pages.</li><li>`PHONE_NUMBER`: renders a text input field for a phone number. The number must start with `+` and contain 7-15 digits (excluding the country code).</li><li>`WHATSAPP_NUMBER`: renders a dropdown menu containing the account's [connected WhatsApp numbers](https://knowledge.hubspot.com/inbox/connect-whatsapp-to-the-conversations-inbox).</li></ul> | `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, UrlField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <UrlField
          name="url"
          label="URL"
          required={false}
          locked={false}
          supportedTypes={["EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG", "PHONE_NUMBER", "WHATSAPP_NUMBER"]}
          default={{
            content_id: null,
            href: "http://example.com",
            type: "EXTERNAL",
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop             | Type   | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Default                                                      |
    | ---------------- | ------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
    | `default`        | Object | URL object, with type, href and content ID (if content is a page or post on HubSpot)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | `{ "content_id" : null, "href" : "", "type" : "EXTERNAL" }`  |
    | `supportedTypes` | Array  | list of the types of links this field allows content creators to select. Remove types from the list that you don't want content creators to have access to set. Types include:<ul><li>`EXTERNAL`: renders a text input field for an external URL.</li><li>`CONTENT`: renders a dropdown menu containing the account's website and landing pages.</li><li>`FILE`: renders a file selector.</li><li>`EMAIL_ADDRESS`: renders a text input field for an email address.</li><li>`BLOG`: renders a dropdown menu containing the account's blog listing pages.</li><li>`PHONE_NUMBER`: renders a text input field for a phone number. The number must start with `+` and contain 7-15 digits (excluding the country code).</li><li>`WHATSAPP_NUMBER`: renders a dropdown menu containing the account's [connected WhatsApp numbers](https://knowledge.hubspot.com/inbox/connect-whatsapp-to-the-conversations-inbox).</li></ul> | `[ "EXTERNAL", "CONTENT", "FILE", "EMAIL_ADDRESS", "BLOG" ]` |
  </Tab>
</Tabs>

## Video

<Callout icon="https://developers.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/icons/settings.svg">
  Can be used in [modules](/cms/start-building/building-blocks/modules/overview#fields-json).
</Callout>

Video fields provide content editors with a place to add HubSpot Video to their module content without the need of using rich text fields.

<Frame>
  <img width="340" src="https://www.hubspot.com/hubfs/Knowledge_Base_2023-24-25/developer/cms/cms-fields-video.png" alt="Video Field" />
</Frame>

<Tabs sync={false}>
  <Tab title="JSON">
    ```json theme={null}
    {
      "name": "videoplayer_field",
      "label": "Video",
      "required": false,
      "locked": false,
      "type": "videoplayer",
      "show_advanced_options": false,
      "default": {
        "player_id": 32173842991,
        "height": 1224,
        "width": 1872,
        "conversion_asset": {
          "type": "CTA",
          "id": "c3e4fa03-2c69-461d-b9af-22b2fde86bc7",
          "position": "POST"
        },
        "loop_video": false,
        "mute_by_default": false,
        "autoplay": false,
        "hide_control": false
      }
    }
    ```

    | Parameter               | Type    | Description                                                                                                                                                                                                                                                      | Default |
    | ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default`               | Object  | Video object with settings, including: <ul><li>`player_id`</li><li>`height`</li><li>`width`</li><li>`size_type`</li><li>`conversion_asset` (see table below)</li><li>`loop_video`</li><li> `mute_by_default`</li><li>`autoplay`</li><li>`hide_control`</li></ul> |         |
    | `show_advanced_options` | Boolean | Whether content creators can see advanced default options.                                                                                                                                                                                                       | `false` |
  </Tab>

  <Tab title="React">
    ```jsx theme={null}
    import { ModuleFields, VideoField } from "@hubspot/cms-components/fields";

    export const fields = (
      <ModuleFields>
        <VideoField
          name="videoplayer_field"
          label="Video"
          required={false}
          locked={false}
          showAdvancedOptions={false}
          default={{
            player_id: 32173842991,
            height: 1224,
            width: 1872,
            conversion_asset: {
              type: "CTA",
              id: "c3e4fa03-2c69-461d-b9af-22b2fde86bc7",
              position: "POST",
            },
            loop_video: false,
            mute_by_default: false,
            autoplay: false,
            hide_control: false,
          }}
        />
      </ModuleFields>
    );
    ```

    | Prop                  | Type    | Description                                                                                                                                                                                                                                                      | Default |
    | --------------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
    | `default`             | Object  | Video object with settings, including: <ul><li>`player_id`</li><li>`height`</li><li>`width`</li><li>`size_type`</li><li>`conversion_asset` (see table below)</li><li>`loop_video`</li><li> `mute_by_default`</li><li>`autoplay`</li><li>`hide_control`</li></ul> |         |
    | `showAdvancedOptions` | Boolean | Whether content creators can see advanced default options.                                                                                                                                                                                                       | `false` |
  </Tab>
</Tabs>

`conversion_asset` object parameters:

| Parameter  | Type   | Description                                                                                                                | Default |
| ---------- | ------ | -------------------------------------------------------------------------------------------------------------------------- | ------- |
| `type`     | String | The type of asset. Can be one of `"FORM"`, `"CTA"`, or `""`                                                                | `""`    |
| `id`       | String | The ID of the Form or CTA type                                                                                             | `""`    |
| `position` | String | Whether the conversion asset should be shown before the video starts or after it ends. Accepts either `"PRE"` or `"POST"`. | `""`    |