# searchTemplate
Searches for a media item based on user input.
## Overview
Use the `searchTemplate` element to display a text field that takes user input in
order to search for a specific item; for example, looking for a specific movie to
download. Developers can also display preselected results in a `shelf`, `list`, or
`collectionList` element under the search field. The following figure shows the basic
layout for a `searchTemplate` page. The theme for the search template defaults to
the system preference.
### Main Elements
The following listing shows the main elements of the `searchTemplate` element in
TVML format.
```xml
![]()
…
```
> Note: The `shelf` element can be replaced with a `collectionList` or `list` element
> to change the look of the search results.
#### Element Descriptions
- [collectionList](/documentation/TVML/collectionlist): Element containing a group of options (such as most
popular movies) or search results.
- [img](/documentation/TVML/img): A figure representing a search result.
- [list](/documentation/TVML/list): Element containing a list of options (such as most popular movies)
or search results.
- [lockup](/documentation/TVML/lockup): A group of elements describing a search result or prepopulated
results.
- [searchField](/documentation/TVML/searchfield): A text field where the user is able to enter search terms.
JavaScript is used to read the information entered.
- [section](/documentation/TVML/section): Elements that are grouped together so that they can be treated
as one element for layout purposes.
- [shelf](/documentation/TVML/shelf): Element containing a row of options (such as most popular movies)
or search results.
- [title](/documentation/TVML/title): The title for a search result.
### Example
The following listing shows the TVML for a `searchTemplate` example. The example
displays a search field and keyboard along the top of the screen. A shelf is prepopulated
with popular movies. Modify your main JavaScript file to accept the user input from
the search field. For more information on available JavaScript functions, see .
```xml
```
The following listing shows the output for the above example:
## Topics
### Valid TVML Attributes
[binding](/documentation/TVML/binding)
Associates information in a data item with an element.
[itemID](/documentation/TVML/itemid)
Mark elements for reuse during DOM updates.
[layoutDirection](/documentation/TVML/layoutdirection)
Specifies the direction in which text is displayed.
[prototype](/documentation/TVML/prototype)
Associates a data item type with an element.
[theme](/documentation/TVML/theme)
Sets the color scheme for an element.
---
Copyright © 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)
