# Data Attributes

Home

## Data- attribute reference

The jQuery Mobile framework uses HTML5 `data-` attributes to allow for markup-based initialization and configuration of widgets. These attributes are completely optional; calling plugins manually and passing options directly is also supported. To avoid naming conflicts with other plugins or frameworks that also use `data-` attributes, set a custom namespace by modifying the `ns` global option.

## Button

Links with `data-role="button"`. Input-based buttons and button elements are auto-enhanced, no `data-role` required

data-corners | true | false
data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-iconpos | left | right | top | bottom | notext
data-iconshadow | true | false
data-inline | true | false
data-shadow | true | false
data-theme | swatch letter (a-z)

Multiple buttons can be wrapped in a container with a `data-role="controlgroup"` attribute for a vertically grouped set. Add the `data-type="horizontal"` attribute for the buttons to sit side-by-side.

## Checkbox

Pairs of labels and inputs with `type="checkbox"` are auto-enhanced, no `data-role` required

data-role | none (prevents auto-enhancement to use native control)
data-theme | swatch letter (a-z) - Added to the form element

## Collapsible

A heading and content wrapped in a container with the `data-role="collapsible"`

data-collapsed | true | false
data-content-theme | swatch letter (a-z)
data-theme | swatch letter (a-z)

## Collapsible set

A number of collapsibles wrapped in a container with the `data-role="collapsible-set"`

data-content-theme | swatch letter (a-z) - Sets all collapsibles in set
data-theme | swatch letter (a-z) - Sets all collapsibles in set

## Dialog

Page with `data-role="page"` linked to with `data-rel="dialog"` on the anchor.

data-close-btn-text | string (text for the close button, dialog only)
data-dom-cache | true | false
data-fullscreen | true | false (used in conjunction with fixed toolbars)
data-overlay-theme | swatch letter (a-z) - overlay theme when the page is opened in a dialog
data-theme | swatch letter (a-z)
data-title | string (title used when page is shown)

## Content

Container with `data-role="content"`

data-theme | swatch letter (a-z)

## Field container

Container with `data-role="fieldcontain"` wrapped around label/form element pair

## Flip toggle switch

Select with `data-role="slider"`, two options only

data-role | none (prevents auto-enhancement to use native control)
data-theme | swatch letter (a-z) - Added to the form element
data-track-theme | swatch letter (a-z) - Added to the form element

## Footer

Container with `data-role="footer"`

data-id | string (unique id, useful in persistent footers)
data-position | fixed
data-theme | swatch letter (a-z)

## Header

Container with `data-role="header"`

data-position | fixed
data-theme | swatch letter (a-z)

## Link

Links, including those with a `data-role="button"`, and form submit buttons share these attributes

data-ajax | true | false
data-direction | reverse (reverse page transition animation)
data-dom-cache | true | false
data-prefetch | true | false
data-rel | back (to move one step back in history) dialog (to open link styled as dialog, not tracked in history) external (for linking to another domain)
data-transition | slide | slideup | slidedown | pop | fade | flip

## Listview

OL or UL with `data-role="listview"`

data-count-theme | swatch letter (a-z)
data-dividertheme | swatch letter (a-z)
data-filter | true | false
data-filter-placeholder | string
data-filter-theme | swatch letter (a-z)
data-inset | true | false
data-split-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-split-theme | swatch letter (a-z) |
data-theme | swatch letter (a-z)

## Listview item

LI within a listview

data-filtertext | string (filter by this value instead of inner text)
data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-role | list-divider
data-theme | swatch letter (a-z) - can also be set on individual LIs

## Navbar

A number of LIs wrapped in a container with `data-role="navbar"`

data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-iconpos | left | right | top | bottom | notext
data-theme | swatch letter (a-z) - can also be set on individual LIs

## Page

Container with `data-role="page"`

data-add-back-btn | true | false (auto add back button, header only)
data-back-btn-text | string
data-back-btn-theme | swatch letter (a-z)
data-close-btn-text | string (text for the close button, dialog only)
data-dom-cache | true | false
data-fullscreen | true | false (used in conjunction with fixed toolbars)
data-overlay-theme | swatch letter (a-z) - overlay theme when the page is opened in a dialog
data-theme | swatch letter (a-z)
data-title | string (title used when page is shown)

## Radio button

Pairs of labels and inputs with `type="radio"` are auto-enhanced, no `data-role` required

data-role | none (prevents auto-enhancement to use native control)
data-theme | swatch letter (a-z) - Added to the form element

## Select

All `select` form elements are auto-enhanced, no `data-role` required

data-icon | home | delete | plus | arrow-u | arrow-d | check | gear | grid | star | custom | arrow-r | arrow-l | minus | refresh | forward | back | alert | info | search
data-iconpos | left | right | top | bottom | notext
data-inline | true | false
data-native-menu | true | false
data-overlay-theme | swatch letter (a-z) - overlay theme for non-native selects
data-placeholder | true | false - Add to the Option
data-role | none (prevents auto-enhancement to use native control)
data-theme | swatch letter (a-z) - Added to the form element

Multiple selects can be wrapped in a fieldset with a `data-role="controlgroup"` attribute for a vertically grouped set. Add the `data-type="horizontal"` attribute for the selects to sit side-by-side.

## Slider

Inputs with `type="range"` are auto-enhanced, no `data-role` required

data-role | none (prevents auto-enhancement to use native control)
data-theme | swatch letter (a-z) - Added to the form element
data-track-theme | swatch letter (a-z) - Added to the form element

## Text input & Textarea

Input `type="text|number|search|etc."` or `textarea` elements are auto-enhanced, no `data-role` required

data-role | none (prevents auto-enhancement to use native control)
data-theme | swatch letter (a-z) - Added to the form element

### More in this section

- API
- Configuring defaults
- Events
- Methods & Utilities
- Data attribute reference
- Theme framework