Selectors - Clay

A form control element used to select from several provided options and enter data.

Selector

Check the Lexicon Selectors Pattern for a more in-depth look at the motivations and proper usage of this component.

<div class="form-group">
	<select class="form-control" id="regularSelectElement">
		<option>Sample 1</option>
		<option>Sample 2</option>
		<option>Sample 3</option>
		<option>Sample 4</option>
	</select>
</div>

Multi select

Tags

You can use a comma to enter tags.

{call ClayMultiSelect.render}
	{param dataSource: [
		'wall',
		'wallpaper',
		'wonderwall',
		'winterfell'
	] /}
	{param helpText: 'You can use a comma to enter tags' /}
	{param label: 'Tags' /}
	{param selectedItems: [
		[
			'label': 'wall',
			'value': 'wall'
		],
		[
			'label': 'wallpaper',
			'value': 'wallpaper'
		]
	] /}
{/call}

<clay-multi-select
	dataSource="['wall', 'wallpaper', 'wonderwall', 'winterfell']"
	helpText="You can use a comma to enter tags"
	label="Tags"
	selectedItems="[{'label': 'wall', 'value': 'wall'}, {'label': 'wallpaper', 'value': 'wallpaper'}]"
>
</clay-multi-select>

<div class="form-group">
	<label for="tagsField1">Tags</label>
	<div class="input-group input-group-stacked-sm-down">
		<div class="input-group-item">
			<div class="form-control form-control-tag-group">
				<input class="form-control-inset" id="tagsField1" type="text"/>
			</div>
			<div class="form-feedback-group">
				<div class="form-text">You can use a comma to enter tags.</div>
			</div>
		</div>
		<div class="input-group-item input-group-item-shrink">
			<button class="btn btn-secondary" type="button">Select</button>
		</div>
	</div>
</div>

<div class="form-group">
	<label for="tagsField2">Tags</label>
	<div class="input-group input-group-stacked-sm-down">
		<div class="input-group-item">
			<div class="form-control form-control-tag-group">
				<span class="label label-dismissible label-secondary">
					<span class="label-item label-item-expand">wall</span>
					<span class="label-item label-item-after">
						<button aria-label="Close" class="close" type="button">
							<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#times"></use>
							</svg>
						</button>
					</span>
				</span>
				<span class="label label-dismissible label-secondary">
					<span class="label-item label-item-expand">wallpaper</span>
					<span class="label-item label-item-after">
						<button aria-label="Close" class="close" type="button">
							<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#times"></use>
							</svg>
						</button>
					</span>
				</span>
				<span class="label label-dismissible label-secondary">
					<span class="label-item label-item-expand">wonderwall</span>
					<span class="label-item label-item-after">
						<button aria-label="Close" class="close" type="button">
							<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#times"></use>
							</svg>
						</button>
					</span>
				</span>
				<span class="label label-dismissible label-secondary">
					<span class="label-item label-item-expand">winterfell</span>
					<span class="label-item label-item-after">
						<button aria-label="Close" class="close" type="button">
							<svg class="lexicon-icon lexicon-icon-times" focusable="false" role="presentation">
								<use href="/images/icons/icons.svg#times"></use>
							</svg>
						</button>
					</span>
				</span>
				<input class="form-control-inset" id="tagsField2" type="text" value="some value"/>
			</div>
			<div class="form-feedback-group">
				<div class="form-text">You can use a comma to enter tags.</div>
			</div>
		</div>
		<div class="input-group-item input-group-item-shrink">
			<button class="btn btn-secondary" type="button">Select</button>
		</div>
	</div>
</div>

API

Property	Description	Type	Required	Default
_inputFocused	Internal flag to indicate that if the input is focused.	bool	false	false
autocompleteFilterCondition	Method or string as condition to filter items in autocomplete.	function\|string	false	(elem) => elem
contentRenderer	Variation name to render different deltemplates.	string\|undefined	false	undefined
creatable	Flag to indicate if only items from autocomplete should be accepted.	bool	false	true
data	Data to add to the element.	object	false	undefined
dataProviderDebounceTime	Set the request debounce time	number	false	200
dataProviderInitialData	Set some initial data while the first request is being made	object\|array	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
defaultEventHandler	Object that wires events with default listeners	object\|undefined	false	undefined
dropdownPortalElement	Element selector to render the autocomplete dropdown in.	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
filteredItems	List of filtered items for suggestion or autocomplete.	Array	false	[]
helpText	Help text to guide the user in the interaction.	string	true	undefined
id	Id to be applied to the element.	string\|undefined	false	undefined
inputAllowedCharacters	Characters allowed in the input element (e.g /	RegExp	false	undefined
inputName	Name for each selected item input hidden.	string\|undefined	false	selectedItems
label	Label of the input element.	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
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
selectedItems	List of the selected Items.	Array<Object>	false	[]
showSelectButton	Flag to indicate if select button should be shown or not.	bool	false	true
spritemap	The path to the SVG spritemap file containing the icons.	string	true	undefined
valueLocator	Sets the name of the field to map the value of the item.	function\|string	false	value