Search input

Search input

• Basics
• Options
• Methods
• Events

Search inputs are a new HTML type that is styled with pill-shaped corners and adds a "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="searc-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 stacks the label on a separate line.

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">Search Input:</label>
    <input type="search" name="password" id="search" value="" />
</div>

The search input is now displayed like this:

Themed variation:

Calling the textinput plugin

This plugin will auto initialize on any page that contains a text input with the type="search" attribute, no 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();