Custom Select

You can handle the onclick event on a select element to make a custom implementation. Here's a step by step guide to make your own User Selector.

1. Create the select with data-ts.custom="true".

<form data-ts="Form">
	<fieldset>
		<label>
			<span>Select</span>
			<select id="mySelect" data-ts.custom="true">
				<option value=""></option>
				<option value="jimbob">Jim Bob Johnson</option>
				<option value="karl">Karl Benson</option>
				<option value="marshall">Marshall Garrett</option>
			</select>
		</label>
	</fieldset>
</form>

2. Make the select open your own, custom Aside when clicked.

$("#mySelect").click(function(){
	ts.ui.get("#myAside", aside => {
		aside.open();
	});
});

3. Create the Aside with options to match your select.

<aside data-ts="Aside" data-ts.title="Custom Select" id="myAside">
	<div data-ts="Panel">
		<menu data-ts="Menu" class="ts-user-menu">
			<li>
				<button data-user="jimbob">
					<img data-ts="UserImage" src="assets/jim.png" alt="Jim Bob Johnson"/>
					<span>Jim Bob Johnson</span>
					<sub>jimbob@company.com</sub>
				</button>
			</li>
			<li>
				<button data-user="karl">
					<img data-ts="UserImage" alt="Karl Benson"/>
					<span>Karl Benson</span>
					<sub>karl@company.com</sub>
				</button>
			</li>
			<li>
				<button data-user="marshall">
					<img data-ts="UserImage" alt="Marshall Garrett"/>
					<span>Marshall Garrett</span>
					<sub>marshall@company.com</sub>
				</button>
			</li>
		</menu>
	</div>
</aside>

4. Update the select whenever something is clicked in the Aside.

$(".ts-user-menu button").click(function(e){
	$('.ts-icon-checked').remove();
	$('.ts-user-menu li').removeClass('ts-checked');
	var name = $(e.currentTarget).data("user");
	$(e.currentTarget).parent('li').addClass('ts-checked');
	$(e.currentTarget).append('<i class="ts-icon-checked"></i>');
	$("#mySelect").val(name);
	ts.ui.Notification.success(name);
	aside.close();
});

Click the select below to check how it works. Good luck!