-isoftdata-svelte-select

Svelte Select

Install

npm i @isoftdata/svelte-select

Props

Name	Type	Description	Default
class	string	Any additional classes to apply to the <select>.	""
disabled	boolean	Whether the select component is disabled or not.	false
emptyText	string	The label for the empty option.	-- Select {label} --
emptyValue	T | null	The value of the empty option.	null
hint	string	The hint text to be displayed below the select component.	""
hintClass	string	The class name to be applied to the hint text.	""
hintClickable	boolean	Whether the hint text is clickable or not.	false
id	string	The id to be applied to the select component.	"id" + uuid()
isLoading	boolean	Whether to show the Label's loading icon.	false
label	string | null	The label text to be displayed above the select component.	null
labelClass	string	The class name to be applied to the label text.	""
name	string	The name to be applied to the select component.	""
options	Array<T>	The options to be displayed in the select component. See "Specifying Options" for details.	[]
required	boolean	Whether the select component is required or not.	false
showEmptyOption	boolean	Whether to show an "empty" option.	true
showLabel	boolean	Whether to show the label text or not.	true
size	"" | "sm" | "lg"	The size of the select component.	"sm"
textEllipsis	boolean	Whether to apply text ellipsis to the select component or not.	false
title	string	The title to be applied to the select component.	""
value	T | T[keyof T] | null	The value of the select component. Svelte allows this to be any type, including an Object.	None (Required)

Slots

• default - Any options you want to apply to the component.
  • If you pass the options prop to the component, this slot will be rendered once per entry of the options array.
  • This slot has a prop, option whose type is T | undefined. It will be T when options is specified, and undefined when it is not.
  • See "Specifying Options" below for more details.
• append - Any content you want to append to the input.
• prepend - Any content you want to prepend to the input

Specifying Options

By default, the default slot will just insert its contents into the select's inner HTML.

Options can be specified three ways:

• Pass any options to the default slot, and do not pass an options prop. (Manual Options in Example)
• Pass an array to the options prop, and do not pass anything into the default slot. The values of options will be used as both the value and label for each option. (Auto Options in Example)
• Pass an array to thye options prop, add a let:{option} prop to the Select, and pass a single option in the default slot, which can reference values from option. (Semi Auto Options in Example)

Events

• change - Fired when the selected value changes

Example

<script lang="ts">
	import Select from "@isoftdata/svelte-select"

	let selectValue: number | null = null
	let selectValue2: string = ""
	let selectValue3: number | null = null
	let selectValue4: { id: number; label: string } | null = null

	const objectOptions = [
		{ id: 1, label: "One" },
		{ id: 2, label: "Two" },
		{ id: 3, label: "Three" },
	]
	const stringOptions = ["One", "Two", "Three"]
</script>

<div class="container">
	<h1>Select</h1>

	<div class="row">
		<div class="col-3">
			<Select
				label="Manual Options"
				bind:value={selectValue}
			>
				{#each objectOptions as option}
					<option value={option.id}>{option.label}</option>
				{/each}
			</Select>
		</div>
		<div class="col-3">
			<Select
				label="Auto Options"
				bind:value={selectValue2}
				options={stringOptions}
				emptyValue=""
			/>
		</div>
		<div class="col-3">
			<Select
				label="Semi Auto Options"
				options={objectOptions}
				bind:value={selectValue3}
				let:option
			>
				<option value={option?.id}>{option?.label}</option>
			</Select>
		</div>
		<div class="col-3">
			<Select
				label="Object Key"
				bind:value={selectValue4}
			>
				{#each objectOptions as option}
					<option value={option}>{option.label}</option>
				{/each}
			</Select>
		</div>
	</div>
</div>