---
title: SK attributes in custom HTML
description: SK attributes are data attributes that DaVinci recognizes and acts upon. Adding SK attributes to the static HTML elements in your Custom HTML section makes the components interactive components in a flow.
component: davinci
page_id: davinci:flows:davinci_sk_attributes
canonical_url: http://docs.pingidentity.com/davinci/flows/davinci_sk_attributes.html
revdate: September 21, 2023
section_ids:
  skbutton-html: skbutton HTML
  skpolling-html: skpolling HTML
  skidp-html: skIDP HTML
  skthirdpartyiframe-html: skthirdpartyiframe HTML
  skerrormessage-html: skerrormessage HTML
  skinputfile-html: skinputfile HTML
  skrecaptcha-html: skrecaptcha HTML
  skfileselector-html: skfileselector HTML
  skcamera-html: skcamera HTML
  skiovation-html: skiovation HTML
  skrisk-html: skrisk HTML
  skfingerprintjs-html: skfingerprintjs HTML
  skscriptloader-html: skscriptloader HTML
---

# SK attributes in custom HTML

SK attributes are data attributes that DaVinci recognizes and acts upon. Adding SK attributes to the static HTML elements in your **Custom HTML** section makes the components interactive components in a flow.

|   |                                                                                                                                                                                              |
| - | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|   | This document covers SK-Components in raw HTML format and their SK attributes. For more information on how they function as part of the UI, see [SK-Components](davinci_sk_components.html). |

You can create custom components in the **Custom HTML** field. Use a `<div>` or `<form>` wrapper for the component, then add data attributes to provide functionality. The first data attribute in custom HTML should be the `data-skcomponent` attribute, which invokes the relevant SK-Component. For example, `data-skcomponent="skbutton"` invokes the `skbutton` component.

|   |                                                                                                                                                                                                                              |
| - | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|   | If you are writing or importing the custom HTML for SK-components, data attributes with meaningful classes and IDs are important because they serve as the main reference points for managing node outputs within your flow. |

## skbutton HTML

A complete raw HTML for the `skbutton` component looks like this:

```html
<button
  type="button"
  data-skcomponent="skbutton"
  id="<some_id>"
  class="<some_class>"
  data-skvalue="value-sent-with-button-submit"
  data-skbuttonvalue="value-sent-with-button-submit"
  data-skbuttontype="form-submit|mfa-reset|otp|next-event|nuance-audio|change-view"
  data-skviewindex="1"
  data-skform="form-id-to-submit"
  data-skotpinput="otp-input-field-id-to-submit"
  data-skbuttonimage="image-src|data-url-to-show-inside-button"
  data-skbuttonimageplacement="left|right"
  data-skbuttonimageclass="button-image-class"
  data-skdefaultloadingcolor="loading-indicator-color"
  data-skcustomloadingindicator="loading-indicator-url"
  data-skcustomloadingindicatorclass="loading-indicator-class"
  >
  Button Label
</button>
```

This also works with an `<input>` tag with the `type="submit"` attribute included:

```html
<input
  type="submit"
  data-skcomponent="skbutton"
  id="<some_id>"
  class="<some_class>"
  data-skbuttonvalue="value-sent-with-button-submit"
  data-skbuttontype="form-submit|mfa-reset|otp|next-event|nuance-audio|change-view"
  data-skviewindex="1"
  data-skform="form-id-to-submit"
  data-skotpinput="otp-input-field-id-to-submit"
  data-skbuttonimage="image-src|data-url-to-show-inside-button"
  data-skbuttonimageplacement="left|right"
  data-skbuttonimageclass="button-image-class"
  data-skdefaultloadingcolor="loading-indicator-color"
  data-skcustomloadingindicator="loading-indicator-url"
  data-skcustomloadingindicatorclass="loading-indicator-class"
  value="Button Label"
  >
</input>
```

The following table provides descriptions for data attributes that can be used with the raw HTML for the button component.

| Attribute                            | Description                                                                                                                    |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------ |
| `data-skbuttonvalue`                 | The value added to the form submit payload.                                                                                    |
| `data-skbuttontype`                  | The event assigned to the button.                                                                                              |
| `data-skform`                        | The ID of the form to be submitted using `form-submit` button type.                                                            |
| `data-skotpinput`                    | The ID of the input field used for OTP value.                                                                                  |
| `data-skbuttonimageplacement`        | Placement of the image with respect to the label. Valid values are `left` or `right`.                                          |
| `data-skbuttonimageclass`            | The class name assigned to the `<img>` tag for the `data-skbuttonimage` attribute.This attribute styles the image.             |
| `data-skdefaultloadingcolor`         | The color of the loading spinner created by the `data-skcustomloadingindicator` attribute.                                     |
| `data-skcustomloadingindicator`      | The URL of a spinner image that is used instead of the default loading icon when the button is submitted.                      |
| `data-skcustomloadingindicatorclass` | The class name assigned to the `<img>` tag for the `data-skcustomloadingindicator` attribute.This class name styles the image. |

The following table provides descriptions for the various types of buttons.

| Type           | Description                                                                                                                                                 |
| -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `form-submit`  | Submits a form.Used alongside `data-skform` whose value is used as the ID for getting form values.                                                          |
| `mfa-reset`    | Resets MFA dialogue box back to **selection** page.                                                                                                         |
| `otp`          | Submits OTP input field value.The OTP input value will be assigned to a property named `OTP`.                                                               |
| `next-event`   | Continues to the next screen without submitting input values.The `data-skbuttonvalue` attribute will progress to the next page.                             |
| `nuance-audio` | Controls Nuance audio mic recording.                                                                                                                        |
| `change-view`  | Switches between views in a multiview screen.Used with the `data-skviewindex` attribute, whose value will be the view index that the widget will switch to. |

## skpolling HTML

The raw HTML for the `skpolling` component looks like this:

```html
<div data-skcomponent="skpolling"
  class="<some_class>"
  data-skpollinterval="2000"
  data-skpollretries="60">
</div>
```

## skIDP HTML

The raw HTML for the `skIDP` component looks like this:

```html
<button data-skcomponent="skIDP"
  class="<some_class>"
  data-skidpvalue="<some_idp>"
  data-skbuttonimage="<some_image>"
  data-skbuttonimageplacement="<some_placement>"
  data-skbuttonimageclass="<some_class>">Login text
</button>
```

## skthirdpartyiframe HTML

The raw HTML for the `skthirdpartyiframe` component looks like this:

```html
<div data-skcomponent="skthirdpartyiframe"
  class="<some_class>"
  data-skwidth="640"
  data-skheight="480">
</div>
```

## skerrormessage HTML

The raw HTML for the `skerrormessage` component looks like this:

```html
<div data-skcomponent="skerrormessage"
  class="<some_class>"
  data-skerrorid="<some_id>">
</div>
```

The `data-skerrorid` attribute is the ID of the input field that the error message is associated with.

## skinputfile HTML

The raw HTML for the `skinputfile` component looks like this:

```html
<input data-skcomponent="skinputfile"
  type="file"
  class="<some_class>"
  data-skinputid="<some_id>"
  data-skshowpreview="yes"
  data-skpreviewtype="text"
  data-skpreviewtextclass="<some_class>"
  data-skpreviewimageclass="<some_class>"
  data-skpreviewimagewidth="640"
  data-skpreviewimageheight="480"
  data-skpdfjsurl="<pdf_js_cdn_url>">
</input>
```

## skrecaptcha HTML

The raw HTML for the `skrecaptcha` component looks like this:

```html
<div data-skcomponent="skrecaptcha"
  class="<some_class>"
  data-skcaptchaid="<some_id>"
  data-skrecaptchasitekey="<some_site_key>">
</div>
```

## skfileselector HTML

The raw HTML for the `skfileselector` component looks like this:

```html
<div data-skcomponent="skfileselector"
  data-sk_<some_prop_to_pass>="<your_value>">
</div>
```

## skcamera HTML

The raw HTML for the `skcamera` component looks like this:

```html
<div data-skcomponent="skcamera"
  data-skroot="sk-camera-root"
  data-skvideo="liveView"
  data-skbtnactions="sk-camera-btn-actions"
  data-skbtncapture="sk-camera-btn-capture"
  data-skcanvas="liveView"
  data-skcapturemessage="Capture Image"
  data-skswitchcameramessage="Switch Camera Message">
</div>
```

## skiovation HTML

The raw HTML for the `skiovation` component looks like this:

```html
<div data-skcomponent="skiovation"
  data-sk_<some_prop_to_pass>="<your_value>">
</div>
```

## skrisk HTML

The raw HTML for the `skrisk` component looks like this:

```html
<div data-skcomponent="skrisk"
  data-sk_<some_prop_to_pass>="<your_value>">
</div>
```

## skfingerprintjs HTML

The raw HTML for the `skfingerprintjs` component looks like this:

```html
<div data-skcomponent="skfingerprintjs"
  data-sk_<some_prop_to_pass>="<your_value>">
</div>
```

## skscriptloader HTML

The raw HTML for the `skscriptloader` component looks like this:

```html
<div data-skcomponent="skscriptloader"
  data-sk_<some_prop_to_pass>="<your_value>">
</div>
```