jQuery Mobile Docs - Search input

# Search input

Home Search

## Search input

- Basics
- Options
- Methods
- Events

Search inputs are a new HTML type that is styled with pill-shaped corners and adds an "x" icon to clear the field once you start typing. Start with an `input` with a `type="search"` attribute in your markup. View the data- attribute reference to see all the possible attributes you can add to search inputs.

Set the `for` attribute of the `label` to match the `id` of the `input` so they are semantically associated. It's possible to accessibly hide the label if it's not desired in the page layout, but we require that it is present in the markup for semantic and accessibility reasons.

    <label for="search-basic">Search Input:</label>
    <input type="search" name="search" id="search-basic" value="" />

This will produce a basic search input. The default styles set the width of the input to 100% of the parent container and stack the label on a separate line.

Search Input:

## Mini version

For a more compact version that is useful in toolbars and tight spaces, add the `data-mini="true"` attribute to the element to create a mini version.

    <label for="search-mini">Search Input:</label>
    <input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />

This will produce a search input that is not as tall as the standard version and has a smaller text size.

Search Input:

## Field containers

Optionally wrap the search input in a container with the `data-role="fieldcontain"` attribute to help visually group it in a longer form.

    <div data-role="fieldcontain">
        <label for="search-2">Search Input:</label>
        <input type="search" name="search-2" id="search-2" value="" />
    </div>

The search input is now displayed like this:

Search Input:

## Theming

The `data-theme` attribute can be added to the search input to set the theme to any swatch letter.

Search Input:

## Setting the clear button text

The text for the button used to clear the search input of text can be configured for all search inputs by binding to the `mobileinit` event and setting the `$.mobile.textinput.prototype.options.clearSearchButtonText` property to a string of your choosing.

## Calling the textinput plugin

This plugin will auto-initialize on any page that contains a text input with the `type="search"` attribute without any need for a `data-role` attribute in the markup. However, if needed, you can directly call the `textinput` plugin on a selector, just like any jQuery plugin:

    $('.mySearchInput').textinput();

### More in this section

- Form elements
- Form basics
- Form element gallery
- Mini form element gallery
- Text inputs
- Search input
- Slider
- Flip toggle switch
- Radio buttons
- Checkboxes
- Select menus
- Theming forms
- Native form elements
- Submitting forms