Text Input Variations

Description

This section demonstrates the search, autocomplete, labels input, date, numeric, and password input variations.

Check the Lexicon Text Input Variations for a more in-depth look at the motivations and proper usage of this component.

Autocomplete text field

{call ClayAutocomplete.render}
	{param dataSource: [
		'Robert Downey',
		'Robert Plant',
		'Robert Baratheon',
		'Robert De niro'
	] /}
	{param inputValue: 'Rob' /}
{/call}

<clay-autocomplete
	dataSource="['Robert Downey', 'Robert Plant', 'Robert Baratheon', 'Robert De niro']"
	inputValue="Rob"
>
</clay-autocomplete>

<div class="dropdown-full form-group">
	<input class="form-control" type="text" value="Rob"/>
	<ul class="dropdown-menu show">
		<li>
			<a class="dropdown-item" href="#1">Rob<strong>ert Downey Jr.</strong></a>
		</li>
		<li>
			<a class="dropdown-item" href="#1">Rob<strong>ert Plant</strong></a>
		</li>
		<li>
			<a class="dropdown-item" href="#1">Rob<strong>ert Baratheon</strong></a>
		</li>
		<li>
			<a class="dropdown-item" href="#1">Rob<strong>ert De Niro</strong></a>
		</li>
	</ul>
</div>

API

Property	Description	Type	Required	Default
_alignedPosition	The current position of the tooltip after being aligned via	number	true	Align.isValidPosition
_dropdownWidth	Flag to indicate the dropdown width referring to the width of the input.	number	true	undefined
allowedCharacters	Flag to indicate the characters allowed in the input element (e.g /	RegExp	false	undefined
contentRenderer	Variation name to render different deltemplates.	string\|undefined	false	undefined
data	Data to add to the element.	object	false	undefined
dataSource	The array of data items that the data source contains, the URL for the data provider to request, or a function that receives the query and returns a promise with the elements.	string\|object\|array\|function	true	undefined
debounceTime	Set the request debounce time	number	false	200
defaultEventHandler	Object that wires events with default listeners	object\|undefined	false	undefined
elementClasses	CSS classes to be applied to the element.	string\|undefined	false	undefined
enableAutocomplete	Flag to enable the filtered items with autocomplete default.	bool	false	true
extractData	Extracts from the data the item to be compared in autocomplete.	function\|string	false	(elem) => elem
filteredItems	List of filtered items for suggestion or autocomplete.	Array<Object>	false	[]
id	Id to be applied to the element.	string\|undefined	false	undefined
dataProviderInitialData	Set some initial data while the first request is being made	object\|array	false	undefined
inputElementClasses	CSS classes to be applied to the input element.	string\|undefined	false	undefined
inputFocused	Flag to indicate that if the input is focused.	bool	false	false
inputName	Name of the selected items input.	string\|undefined	false	undefined
inputValue	Value of the input.	string\|undefined	false	undefined
labelLocator	Sets the name of the field to map the label of the item.	function\|string	false	label
placeholder	Input placeholder.	string\|undefined	false	undefined
pollingInterval	Flag to define how often to refetch data (ms)	number\|undefined	false	0
requestInputMode	Specifies explicitly if request needs to be made with debounce (userInput) or with polling (polling)	object\|array	false	undefined
requestOptions	Set ups the request options	object\|undefined	false	undefined
requestPolling	Flag to define how often to refetch data (ms)	number\|undefined	false	0
requestRetries	Define how many attempts will be made when the request fails	number\|undefined	false	5
requestTimeout	Set timeout of the request	number\|undefined	false	30000
unstable_content	The content renderer. Warning: This API is unstable and can be changed at any time, use at your own risk.	html	false	undefined
useDefaultClasses	Flag to indicate the autocomplete should use default css classes or not.	bool	false	true
valueLocator	Sets the name of the field to map the value of the item.	function\|string	false	label
wrapInput	Flag to indicate whether to wrap input with the	bool	false	false

Search field

<div class="input-group">
	<div class="dropdown-full input-group-item">
		<input class="form-control input-group-inset input-group-inset-after" placeholder="Search for..." type="text" value="ele"/>
		<span class="input-group-inset-item input-group-inset-item-after">
			<button class="btn btn-unstyled" type="submit">
				<svg class="lexicon-icon lexicon-icon-search" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#search" />
				</svg>
			</button>
			<button class="btn btn-unstyled" type="button">
				<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
					<use href="/images/icons/icons.svg#times" />
				</svg>
			</button>
		</span>
		<ul class="dropdown-menu show">
			<li>
				<a class="dropdown-item" href="#1">ele<strong>ctric toothbrush</strong></a>
			</li>
			<li>
				<a class="dropdown-item" href="#1">ele<strong>ctric kettle</strong></a>
			</li>
			<li>
				<a class="dropdown-item" href="#1">ele<strong>ctric razor</strong></a>
			</li>
			<li>
				<a class="dropdown-item" href="#1">ele<strong>ctrodes for tents</strong></a>
			</li>
		</ul>
	</div>
</div>

Numeric field

Amount

<div class="form-group">
	<label for="basicInputTypeNumber">Amount</label>
	<input class="form-control" id="basicInputTypeNumber" type="number"/>
</div>

Password field

A pattern for displaying the content inside a password input. Use .input-text-label inside .input-group-inset-item to display specific content for .form-control[type="text"] and .input-password-label for .form-control[type="password"].

Password

<div class="form-group">
	<label for="passwordFieldHidden">Password</label>
	<div class="input-group input-group-password">
		<div class="input-group-item">
			<input aria-label="Password Hidden" class="form-control input-group-inset input-group-inset-after" id="passwordFieldHidden" type="password" value="my-seekret"/>
			<div class="input-group-inset-item input-group-inset-item-after">
				<button class="btn btn-unstyled" type="button">
					<span class="input-text-label">
						<svg class="lexicon-icon lexicon-icon-hidden" focusable="false" role="presentation">
							<use href="/images/icons/icons.svg#hidden" />
						</svg>
					</span>
					<span class="input-password-label">
						<svg class="lexicon-icon lexicon-icon-view" focusable="false" role="presentation">
							<use href="/images/icons/icons.svg#view" />
						</svg>
					</span>
				</button>
			</div>
		</div>
	</div>
</div>

<div class="form-group">
	<label for="passwordFieldHidden">Password</label>
	<div class="input-group input-group-password">
		<div class="input-group-item">
			<input aria-label="Password Hidden" class="form-control input-group-inset input-group-inset-after" id="passwordFieldHidden" type="text" value="my-seekret"/>
			...
		</div>
	</div>
</div>