home-assistant.github.io/components/input_select/index.html
2018-01-05 12:30:35 +00:00

373 lines
22 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Input Select - Home Assistant</title>
<meta name="author" content="Home Assistant">
<meta name="description" content="Instructions how to integrate the Input Select component into Home Assistant.">
<meta name="viewport" content="width=device-width">
<link rel="canonical" href="https://home-assistant.io/components/input_select/">
<meta property="fb:app_id" content="338291289691179">
<meta property="og:title" content="Input Select">
<meta property="og:site_name" content="Home Assistant">
<meta property="og:url" content="https://home-assistant.io/components/input_select/">
<meta property="og:type" content="article">
<meta property="og:description" content="Instructions how to integrate the Input Select component into Home Assistant.">
<meta property="og:image" content="https://home-assistant.io/images/default-social.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@home_assistant">
<meta name="twitter:title" content="Input Select">
<meta name="twitter:description" content="Instructions how to integrate the Input Select component into Home Assistant.">
<meta name="twitter:image" content="https://home-assistant.io/images/default-social.png">
<link href="/stylesheets/screen.css" media="screen, projection, print" rel="stylesheet">
<link href="/atom.xml" rel="alternate" title="Home Assistant" type="application/atom+xml">
<link rel='shortcut icon' href='/images/favicon.ico' />
<link rel='icon' type='image/png' href='/images/favicon-192x192.png' sizes='192x192' />
</head>
<body >
<header class='site-header'>
<div class="grid-wrapper">
<div class="grid">
<div class="grid__item three-tenths lap-two-sixths palm-one-whole ha-title">
<a href="/" class="site-title">
<img width='40' src='/demo/favicon-192x192.png'>
<span>Home Assistant</span>
</a>
</div>
<div class="grid__item seven-tenths lap-four-sixths palm-one-whole">
<nav>
<input type="checkbox" id="toggle">
<label for="toggle" class="toggle" data-open="Main Menu" data-close="Close Menu"></label>
<ul class="menu pull-right">
<li><a href="/getting-started/">Getting started</a></li>
<li><a href="/components/">Components</a></li>
<li><a href="/docs/">Docs</a></li>
<li><a href="/cookbook/">Examples</a></li>
<li><a href="/developers/">Developers</a></li>
<li><a href="/blog/">Blog</a></li>
<li><a href="/help/">Need help?</a></li>
<li><a href='#' class='show-search'><i class="icon-search"></i></a></li>
</ul>
</nav>
<div class='search-container' style='display: none'>
<div class='search'>
<i class="icon-search"></i>
<input id='search' placeholder='Search the docs…'>
<a href='#' class='close'><i class="icon-remove-sign"></i></a>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="grid-wrapper">
<div class="grid grid-center">
<div class="grid__item two-thirds lap-one-whole palm-one-whole">
<article class="page">
<header>
<h1 class="title indent">
Input Select
</h1>
</header>
<hr class="divider">
<p>The <code class="highlighter-rouge">input_select</code> component allows the user to define a list of values that can be selected via the frontend and can be used within conditions of automation. When a user selects a new item, a state transition event is generated. This state event can be used in an <code class="highlighter-rouge">automation</code> trigger.</p>
<p>To enable this platform in your installation, add the following lines to your <code class="highlighter-rouge">configuration.yaml</code>:</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="c1"># Example configuration.yaml entry</span>
<span class="s">input_select</span><span class="pi">:</span>
<span class="s">who_cooks</span><span class="pi">:</span>
<span class="s">name</span><span class="pi">:</span> <span class="s">Who cooks today</span>
<span class="s">options</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">Paulus</span>
<span class="pi">-</span> <span class="s">Anne Therese</span>
<span class="s">initial</span><span class="pi">:</span> <span class="s">Anne Therese</span>
<span class="s">icon</span><span class="pi">:</span> <span class="s">mdi:panda</span>
<span class="s">living_room_preset</span><span class="pi">:</span>
<span class="s">options</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">Visitors</span>
<span class="pi">-</span> <span class="s">Visitors with kids</span>
<span class="pi">-</span> <span class="s">Home Alone</span>
</code></pre>
</div>
<div class="config-vars">
<h3><a class="title-link" name="configuration-variables" href="#configuration-variables"></a> Configuration Variables</h3>
<dl class="">
<dt><a class="title-link" name="input_select" href="#input_select"></a> input_select</dt>
<dd>
<p class="desc"><span class="type">(<span class="map">map</span>)</span><span class="required">(Required)</span><span class="description">Alias for the input. Multiple entries are allowed.</span></p>
</dd>
<dd>
<dl class="nested">
<dt><a class="title-link" name="name" href="#name"></a> name</dt>
<dd>
<p class="desc"><span class="type">(<span class="string">String</span>)</span><span class="required">(Optional)</span><span class="description">Friendly name of the input.</span></p>
</dd>
<dt><a class="title-link" name="options" href="#options"></a> options</dt>
<dd>
<p class="desc"><span class="type">(<span class="array">Array</span>)</span><span class="required">(Required)</span><span class="description">List of options to choose from.</span></p>
</dd>
<dt><a class="title-link" name="initial" href="#initial"></a> initial</dt>
<dd>
<p class="desc"><span class="type">(<span class="element of options">Element of options</span>)</span><span class="required">(Optional)</span><span class="description">Initial value when Home Assistant starts.</span></p>
<p class="default">Default value: First element of options</p>
</dd>
<dt><a class="title-link" name="icon" href="#icon"></a> icon</dt>
<dd>
<p class="desc"><span class="type">(<span class="icon">icon</span>)</span><span class="required">(Optional)</span><span class="description">Icon to display for the component. Refer to the <a href="/docs/configuration/customizing-devices/#possible-values">Customizing devices</a> page for possible values.</span></p>
</dd>
</dl>
</dd>
</dl>
</div>
<p class="note">
Because YAML defines <a href="http://yaml.org/type/bool.html">booleans</a> as equivalent, any variations of On, Yes, Y, Off, No, or N (regardless of case) used as option names will be replaced by True and False unless they are defined in quotation marks.
</p>
<h3><a class="title-link" name="restore-state" href="#restore-state"></a> Restore State</h3>
<p>This component supports the <code class="highlighter-rouge">restore_state</code> function which restores the state after Home Assistant has started to the value it has been before Home Assistant stopped. To use this feature please make sure that the <a href="/components/recorder/"><code class="highlighter-rouge">recorder</code></a> component is enabled and your entity does not have a value set for <code class="highlighter-rouge">initial</code>. Additional information can be found in the <a href="/components/recorder/#restore-state">Restore state</a> section of the <a href="/components/recorder/"><code class="highlighter-rouge">recorder</code></a> component documentation.</p>
<h3><a class="title-link" name="services" href="#services"></a> Services</h3>
<p>This components provide three services to modify the state of the <code class="highlighter-rouge">input_select</code>.</p>
<table>
<thead>
<tr>
<th>Service</th>
<th>Data</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code class="highlighter-rouge">select_option</code></td>
<td><code class="highlighter-rouge">option</code></td>
<td>This can be used to select a specific option.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">set_options</code></td>
<td><code class="highlighter-rouge">options</code><br /><code class="highlighter-rouge">entity_id(s)</code></td>
<td>Set the options for specific <code class="highlighter-rouge">input_select</code> entities.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">select_previous</code></td>
<td> </td>
<td>Select the previous option.</td>
</tr>
<tr>
<td><code class="highlighter-rouge">select_next</code></td>
<td> </td>
<td>Select the next option.</td>
</tr>
</tbody>
</table>
<h3><a class="title-link" name="scenes" href="#scenes"></a> Scenes</h3>
<p>To specify a target option in a <a href="/components/scene/">Scene</a> you have to specify the target as <code class="highlighter-rouge">option</code> attribute:</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="c1"># Example configuration.yaml entry</span>
<span class="s">scene</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">name</span><span class="pi">:</span> <span class="s">Example1</span>
<span class="s">entities</span><span class="pi">:</span>
<span class="s">input_select.who_cooks</span><span class="pi">:</span>
<span class="s">option</span><span class="pi">:</span> <span class="s">Paulus</span>
</code></pre>
</div>
<h2><a class="title-link" name="automation-examples" href="#automation-examples"></a> Automation Examples</h2>
<p>The following example shows the usage of the <code class="highlighter-rouge">input_select.select_option</code> service in an automation:</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="c1"># Example configuration.yaml entry</span>
<span class="s">automation</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">alias</span><span class="pi">:</span> <span class="s">example automation</span>
<span class="s">trigger</span><span class="pi">:</span>
<span class="s">platform</span><span class="pi">:</span> <span class="s">event</span>
<span class="s">event_type</span><span class="pi">:</span> <span class="s">MY_CUSTOM_EVENT</span>
<span class="s">action</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">service</span><span class="pi">:</span> <span class="s">input_select.select_option</span>
<span class="s">data</span><span class="pi">:</span>
<span class="s">entity_id</span><span class="pi">:</span> <span class="s">input_select.who_cooks</span>
<span class="s">option</span><span class="pi">:</span> <span class="s">Paulus</span>
</code></pre>
</div>
<p>To dynamically set the <code class="highlighter-rouge">input_select</code> options you can call <code class="highlighter-rouge">input_select.set_options</code>. The following example can be used in an automation rule:</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="c1"># Example configuration.yaml entry</span>
<span class="s">automation</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">alias</span><span class="pi">:</span> <span class="s">example automation</span>
<span class="s">trigger</span><span class="pi">:</span>
<span class="s">platform</span><span class="pi">:</span> <span class="s">event</span>
<span class="s">event_type</span><span class="pi">:</span> <span class="s">MY_CUSTOM_EVENT</span>
<span class="s">action</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s">service</span><span class="pi">:</span> <span class="s">input_select.set_options</span>
<span class="s">data</span><span class="pi">:</span>
<span class="s">entity_id</span><span class="pi">:</span> <span class="s">input_select.who_cooks</span>
<span class="s">options</span><span class="pi">:</span> <span class="pi">[</span><span class="s2">"</span><span class="s">Item</span><span class="nv"> </span><span class="s">A"</span><span class="pi">,</span> <span class="s2">"</span><span class="s">Item</span><span class="nv"> </span><span class="s">B"</span><span class="pi">,</span> <span class="s2">"</span><span class="s">Item</span><span class="nv"> </span><span class="s">C"</span><span class="pi">]</span>
</code></pre>
</div>
<p>Example of <code class="highlighter-rouge">input_select</code> being used in a bidirectional manner, both being set by and controlled by an MQTT action in an automation.</p>
<div class="language-yaml highlighter-rouge"><pre class="highlight"><code><span class="c1"># Example configuration.yaml entry using 'input_select' in an action in an automation</span>
<span class="c1"># Define input_select</span>
<span class="s">input_select</span><span class="pi">:</span>
<span class="s">thermostat_mode</span><span class="pi">:</span>
<span class="s">name</span><span class="pi">:</span> <span class="s">Thermostat Mode</span>
<span class="s">options</span><span class="pi">:</span>
<span class="pi">-</span> <span class="s2">"</span><span class="s">auto"</span>
<span class="pi">-</span> <span class="s2">"</span><span class="s">off"</span>
<span class="pi">-</span> <span class="s2">"</span><span class="s">cool"</span>
<span class="pi">-</span> <span class="s2">"</span><span class="s">heat"</span>
<span class="s">icon</span><span class="pi">:</span> <span class="s">mdi:target</span>
<span class="c1"># Automation. </span>
<span class="c1"># This automation script runs when a value is received via MQTT on retained topic: thermostatMode</span>
<span class="c1"># It sets the value selector on the GUI. This selector also had its own automation when the value is changed.</span>
<span class="pi">-</span> <span class="s">alias</span><span class="pi">:</span> <span class="s">Set Thermostat Mode Selector</span>
<span class="s">trigger</span><span class="pi">:</span>
<span class="s">platform</span><span class="pi">:</span> <span class="s">mqtt</span>
<span class="s">topic</span><span class="pi">:</span> <span class="s2">"</span><span class="s">thermostatMode"</span>
<span class="c1"># entity_id: input_select.thermostat_mode</span>
<span class="s">action</span><span class="pi">:</span>
<span class="s">service</span><span class="pi">:</span> <span class="s">input_select.select_option</span>
<span class="s">data_template</span><span class="pi">:</span>
<span class="s">entity_id</span><span class="pi">:</span> <span class="s">input_select.thermostat_mode</span>
<span class="s">option</span><span class="pi">:</span> <span class="s2">"</span><span class="s">{{</span><span class="nv"> </span><span class="s">trigger.payload</span><span class="nv"> </span><span class="s">}}"</span>
<span class="c1"># This automation script runs when the thermostat mode selector is changed.</span>
<span class="c1"># It publishes its value to the same MQTT topic it is also subscribed to.</span>
<span class="pi">-</span> <span class="s">alias</span><span class="pi">:</span> <span class="s">Set Thermostat Mode</span>
<span class="s">trigger</span><span class="pi">:</span>
<span class="s">platform</span><span class="pi">:</span> <span class="s">state</span>
<span class="s">entity_id</span><span class="pi">:</span> <span class="s">input_select.thermostat_mode</span>
<span class="s">action</span><span class="pi">:</span>
<span class="s">service</span><span class="pi">:</span> <span class="s">mqtt.publish</span>
<span class="s">data_template</span><span class="pi">:</span>
<span class="s">topic</span><span class="pi">:</span> <span class="s2">"</span><span class="s">thermostatMode"</span>
<span class="s">retain</span><span class="pi">:</span> <span class="s">true</span>
<span class="s">payload</span><span class="pi">:</span> <span class="s2">"</span><span class="s">{{</span><span class="nv"> </span><span class="s">states('input_select.thermostat_mode')</span><span class="nv"> </span><span class="s">}}"</span>
</code></pre>
</div>
</article>
</div>
<aside id="sidebar" class="grid__item one-third lap-one-whole palm-one-whole">
<div class="grid">
<section class="aside-module grid__item one-whole lap-one-half">
<div class='edit-github'><a href='https://github.com/home-assistant/home-assistant.github.io/tree/current/source/_components/input_select.markdown'>Edit this page on GitHub</a></div>
<div class='brand-logo-container section'>
<img src='/images/supported_brands/home-assistant.png' />
</div>
<div class='section'>
Introduced in release: 0.13
</div>
<div class='section'>
<h1 class="title delta">Category Automation</h1>
<ul class='divided'>
<li>
<a href='/components/alert/'>Alert</a>
</li>
<li>
<a href='/components/automation/'>Automation</a>
</li>
<li>
<a href='/components/counter/'>Counter</a>
</li>
<li>
<a href='/components/switch.flux/'>Flux Light Adjustment</a>
</li>
<li>
<a href='/components/hdmi_cec/'>HDMI CEC</a>
</li>
<li>
<a href='/components/ifttt/'>IFTTT</a>
</li>
<li>
<a href='/components/input_boolean/'>Input Boolean</a>
</li>
<li>
<a href='/components/input_datetime/'>Input Datetime</a>
</li>
<li>
<a href='/components/input_number/'>Input Number</a>
</li>
<li>
Input Select
</li>
<li>
<a href='/components/input_text/'>Input Text</a>
</li>
<li>
<a href='/components/keyboard/'>Keyboard</a>
</li>
<li>
<a href='/components/lirc/'>LIRC</a>
</li>
<li>
<a href='/components/device_sun_light_trigger/'>Presence based lights</a>
</li>
<li>
<a href='/components/proximity/'>Proximity</a>
</li>
<li>
<a href='/components/python_script/'>Python Scripts</a>
</li>
<li>
<a href='/components/rest_command/'>RESTful Command</a>
</li>
<li>
<a href='/components/script/'>Scripts</a>
</li>
<li>
<a href='/components/shell_command/'>Shell command</a>
</li>
<li>
<a href='/components/timer/'>Timer</a>
</li>
</ul>
</div>
</section>
</div>
</aside>
</div>
</div>
<footer>
<div class="grid-wrapper">
<div class="grid">
<div class="grid__item">
<div class="copyright">
<a rel="me" href='https://twitter.com/home_assistant'><i class="icon-twitter"></i></a>
<a rel="me" href='https://facebook.com/homeassistantio'><i class="icon-facebook"></i></a>
<a rel="me" href='https://plus.google.com/110560654828510104551'><i class="icon-google-plus"></i></a>
<a rel="me" href='https://github.com/home-assistant/home-assistant'><i class="icon-github"></i></a>
<div class="credit">
Contact us at <a href='mailto:hello@home-assistant.io'>hello@home-assistant.io</a> (no support!).<br>
Website powered by <a href='http://jekyllrb.com/'>Jekyll</a> and the <a href='https://github.com/coogie/oscailte'>Oscalite theme</a>.<br />
Hosted by <a href='https://pages.github.com/'>GitHub</a> and served by <a href='https://cloudflare.com'>CloudFlare</a>.
</div>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/88x31.png" /></a><br /><span xmlns:dct="http://purl.org/dc/terms/" property="dct:title">home-assistant.io</span> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/">Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License</a>.
</div>
</div>
</div>
</div>
</footer>
<script>
var _gaq=[['_setAccount','UA-57927901-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script type="text/javascript">
docsearch({
apiKey: 'ae96d94b201c5444c8a443093edf3efb',
indexName: 'home-assistant',
inputSelector: '#search',
debug: false // Set debug to true if you want to inspect the dropdown
});
document.querySelector('.search .close').addEventListener('click', function(ev) {
ev.preventDefault();
document.querySelector('.search-container').style.display = 'none';
});
document.querySelector('.show-search').addEventListener('click', function(ev) {
ev.preventDefault();
document.querySelector('.search-container').style.display = 'block';
document.getElementById('toggle').checked = false;
document.querySelector('.search-container input').focus();
});
</script>
</body>
</html>