Clear Button

Select Multiple

new TomSelect('#ex-clear-button',{
	plugins: {
		'clear_button':{
			'title':'Remove all selected options',
		}
	},
	persist: false,
	create: true,
});

<input type="text" id="ex-clear-button" value="awesome,neat" autocomplete="off" placeholder="How cool is this?" />

Select Single

new TomSelect('#clear-button-single',{
	maxItems:1,
	plugins: ['clear_button'],
	persist: false,
	create: true,
});

<select type="text" id="clear-button-single" autocomplete="off">
	<option value="">How cool is this?</option>
	<option selected>awesome</option>
	<option>neat</option>
</select>

Select Single with Empty Option

new TomSelect('#clear-button-empty',{
	allowEmptyOption: true,
	maxItems:1,
	plugins: ['clear_button'],
	persist: false,
	create: true,
});

<select type="text" id="clear-button-empty" autocomplete="off">
	<option value="">How cool is this?</option>
	<option>awesome</option>
	<option>neat</option>
</select>

Plugin Configuration

Setting	Description
`html`	A callback that returns an html string used to create the button Type: `callback` Default: function(data){ return `<div class="${data.className}" title="${data.title}">×</div>`; }
`title`	The value of the title attribute on the close button Type: `string` Default: `Clear All`
`className`	The CSS class name of the close button Type: `string` Default: `clear-button`

Clear Button

Plugin Configuration

Available Plugins