> You are reading the Docusign Developer Documentation. For clean Markdown of any page, append .md to the page URL.
>
> Documentation indexes by section:
> - APIs and SDKs: https://docusign.docs.buildwithfern.com/docs/llms.txt
> - Platform 101: https://docusign.docs.buildwithfern.com/platform/llms.txt
> - Extension Apps: https://docusign.docs.buildwithfern.com/extension-apps/llms.txt
> - Docusign CLI: https://docusign.docs.buildwithfern.com/docusign-cli/llms.txt
>
> Authentication (OAuth, JWT Grant, M2M): https://docusign.docs.buildwithfern.com/platform/auth
> Webhooks and Connect: https://docusign.docs.buildwithfern.com/platform/webhooks
>
> OpenAPI specifications: https://docusign.docs.buildwithfern.com/openapi.json
> MCP server: https://docusign.docs.buildwithfern.com/_mcp/server

# Setting tabs in HTML documents

> Describes the options and use cases for setting tabs in responsive HTML documents.

When you create an HTML document for a [Advanced responsive signing](/docs/esign-rest-api/esign101/concepts/responsive#advanced) workflow, you can set tabs for that document in one of two ways:

* [Adding HTML blocks](/docs/esign-rest-api/esign101/concepts/responsive/setting-tabs#addingHtml) that contain the tab definitions to the document’s HTML source. Each Docusign tab has a corresponding HTML tag that you can use to add and configure that tab within the document definition.
* [Embedding JSON markers](/docs/esign-rest-api/esign101/concepts/responsive/setting-tabs#embeddingJson) into the HTML that represents tabs. These markers will be replaced by tabs when the document is processed.

**Note:** Only inline styles will be reflected in the processed document. Any styles defined outside the page, such as `<style>` tag elements in the `<head>` section or CSS, will not be applied.

## Define tabs as HTML

You can configure the properties of the tabs you have added as HTML elements using attributes. Any value set in this way will override the tab's default values.

**`JSON`**

```json title="JSON"
{
  "recipients": {
    "signers": [{
      "name": "Example J. Simpson",
      "email": "ejs@example.com",
      "recipientId": "1",
      "routingOrder": "1"
    }]
  },
  "status": "sent",
  "emailSubject": "Please DocuSign: Contract",
  "documents": [{
    "name" : "Example contract",
    "documentId" : "1",
    "htmlDefinition": {
      "source": "<div><div><button data-ds-type=\"approve\" name=\"Approve\" title=\"I agree\">I Agree</button><p>I agree to the terms of this contract.</p></div><ds-signature data-ds-recipient-id=\"1\" name=\"signature\"></div>"
    }
  }]
}
```

| Tab property           | HTML attribute                 | Default value |
| ---------------------- | ------------------------------ | ------------- |
| AutoEmail              | data-ds-autoemail              | true          |
| Bold                   | font-weight                    | ""            |
| Checked                | checked                        | false         |
| Color                  | color                          | ""            |
| ConditionalParent      | data-ds-conditional-parent     | ""            |
| ConditionalParentValue | data-ds-conditional-value      | ""            |
| Disabled               | disabled                       | false         |
| FontFamily             | font-family                    | ""            |
| FontSize               | font-size                      | ""            |
| Height                 | height                         | 0             |
| Italic                 | font-style                     | ""            |
| Label                  | name                           | ""            |
| Locked                 | readonly                       | false         |
| MaxLength              | maxlength                      | 0             |
| Pattern                | pattern                        | ""            |
| PatternMessage         | data-ds-pattern-message        | ""            |
| Role                   | data-ds-role                   | ""            |
| RecipientId            | data-ds-recipient-id           | ""            |
| Required               | required                       | true          |
| ScaleValue             | data-ds-scale                  | ""            |
| Shared                 | data-ds-shared                 | false         |
| SharedRequireInitial   | data-ds-shared-require-initial | false         |
| TextGrow               | data-ds-autogrow               | true          |
| Title                  | title                          | ""            |
| Value                  | value                          | ""            |
| Width                  | width \| size                  | Size          |

## Define tabs as JSON markers

Instead of defining tabs as HTML, you can embed JSON markers referencing your tab definitions directly into the document’s HTML source. These markers will be replaced by tabs when the document is processed.

Each JSON marker contains one element, `tabLabel`, which indicates which tab will be placed. Each `tabLabel` should have a unique value and must match one of the tab definitions set in the API request, as shown in the associated example definition:

## JSON marker Radio tabs

Radio tabs use a unique behavior. When placing a radio tab, the JSON must include the groupName and value properties, which must map to a radio button within a group, as shown in the example below.

**Inline JSON marker:**

```json
  {{"groupName": "myRadio", "value": "radio1"}}
  {{"groupName": "myRadio", "value": "radio2"}}
```

**`JSON`**

```json title="JSON"
{
  "recipients": {
    "signers": [
      {
        "name": "Example J. Simpson",
        "email": "ejs@example.com",
        "recipientId": "1",
        "routingOrder": "1",
        "tabs": {
          "approveTabs": [
            {
              "name": "Approve",
              "tabLabel": "exampleApproveTab",
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1"
            }
          ],
          "signHereTabs": [
            {
              "name": "SignHere",
              "tabLabel": "exampleSignHereTab",
              "documentId": "1",
              "recipientId": "1",
              "pageNumber": "1"
            }
          ]
        }
      }
    ]
  },
  "status": "sent",
  "emailSubject": "Please DocuSign: Contract",
  "documents": [
    {
      "name" : "Example contract",
      "documentId" : "1",
      "htmlDefinition": {
        "source": "<div>{{\"tabLabel\": \"exampleApproveTab\"}}<p>I agree to the terms of this contract.</p>{{\"tabLabel\": \"exampleSignHereTab\"}}</div>"
      }
    }
  ]
}
```

## Supported HTML, attribute, and CSS elements

**Allowed HTML element list**

* a
* abbr
* acronym
* address
* area
* article
* aside
* b
* bdi
* big
* blockquote
* body
* br
* button
* caption
* center
* cite
* code
* col
* colgroup
* data
* datalist
* dd
* del
* details
* dfn
* dir
* div
* dl
* dt
* em
* fieldset
* figure
* figcaption
* font
* footer
* form
* h1
* h2
* h3
* h4
* h5
* h6
* head
* header
* hr
* html
* i
* img
* input
* ins
* kbd
* keygen
* label
* legend
* li
* main
* map
* mark
* menu
* menuitem
* meter
* nav
* ol
* optgroup
* option
* output
* p
* pre
* progress
* q
* rp
* rt
* ruby
* s
* samp
* section
* select
* small
* span
* strike
* strong
* sub
* sup
* summary
* table
* tbody
* td
* textarea
* tfoot
* th
* thead
* time
* tr
* tt
* u
* ul
* var
* wbr

**Allowed HTML attribute list**

* abbr
* accept
* accept-charset
* accesskey
* action
* align
* alt
* autocomplete
* autosave
* axis
* bgcolor
* border
* cellpadding
* cellspacing
* char
* charoff
* charset
* checked
* challenge
* cite
* class
* clear
* cols
* colspan
* color
* compact
* contenteditable
* coords
* data-navigate-to
* data-qa
* data-action
* data-icon-closed
* data-icon-open
* data-display
* datetime
* dir
* disabled
* draggable
* dropzone
* enctype
* for
* frame
* headers
* height
* high
* href
* hreflang
* hspace
* id
* ismap
* keytype
* lang
* label
* list
* longdesc
* low
* max
* maxlength
* media
* method
* min
* multiple
* name
* nohref
* noshade
* novalidate
* nowrap
* open
* optimum
* pattern
* placeholder
* prompt
* pubdate
* radiogroup
* readonly
* rel
* required
* rev
* reversed
* rows
* rowspan
* rules
* scope
* selected
* shape
* size
* span
* spellcheck
* src
* start
* step
* style
* summary
* tabindex
* target
* title
* type
* usemap
* valign
* value
* vspace
* width
* wrap

**Allowed HTML CSS list**

* align
* align-content
* align-items
* align-self
* background
* background-attachment
* background-clip
* background-color
* background-image
* background-origin
* background-position
* background-repeat
* background-repeat-x
* background-repeat-y
* background-size
* border
* border-bottom
* border-bottom-color
* border-bottom-left-radius
* border-bottom-right-radius
* border-bottom-style
* border-bottom-width
* border-collapse
* border-color
* border-image
* border-image-outset
* border-image-repeat
* border-image-slice
* border-image-source
* border-image-width
* border-left
* border-left-color
* border-left-style
* border-left-width
* border-radius
* border-right
* border-right-color
* border-right-style
* border-right-width
* border-spacing
* border-style
* border-top
* border-top-color
* border-top-left-radius
* border-top-right-radius
* border-top-style
* border-top-width
* border-width
* bottom
* caption-side
* clear
* clip
* color
* content
* counter-increment
* counter-reset
* cursor
* direction
* display
* empty-cells
* flex
* flex-direction
* flex-flow
* flex-grow
* flex-shrink
* flex-wrap
* float
* font
* font-family
* font-feature-settings
* font-kerning
* font-language-override
* font-size
* font-size-adjust
* font-stretch
* font-style
* font-synthesis
* font-variant
* font-variant-alternates
* font-variant-caps
* font-variant-east-asian
* font-variant-ligatures
* font-variant-numeric
* font-variant-position
* font-weight
* grid-area
* grid-column
* grid-column-end
* grid-column-gap
* grid-column-start
* grid-gap
* grid-row
* grid-row-end
* grid-row-gap
* grid-row-start
* grid-template-area
* grid-template-columns
* grid-template-rows
* height
* justify-content
* justify-self
* left
* letter-spacing
* line-height
* list-style
* list-style-image
* list-style-position
* list-style-type
* margin
* margin-bottom
* margin-left
* margin-right
* margin-top
* max-height
* max-width
* min-height
* min-width
* opacity
* orphans
* outline
* outline-color
* outline-offset
* outline-style
* outline-width
* overflow
* overflow-wrap
* overflow-x
* overflow-y
* padding
* padding-bottom
* padding-left
* padding-right
* padding-top
* page-break-after
* page-break-before
* page-break-inside
* quotes
* right
* table-layout
* text-align
* text-decoration
* text-decoration-color
* text-decoration-line
* text-decoration-skip
* text-decoration-style
* text-indent
* text-shadow
* text-transform
* top
* unicode-bidi
* vertical-align
* visibility
* white-space
* widows
* width
* word-break
* word-spacing
* word-wrap
* z-index

**Allowed URI Schemes**

* data
* http
* https