Components / Input controls

Dropdown

Component + manager

Provides a dropdown or horizontal selector interface to select from an array of options, with optional search support and multi-selection.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentDropdown

Managercreate_dropdown_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { Dropdown, create_dropdown_manager } from "sveltekit-ui"

  const manager = create_dropdown_manager({
    label: "Project status",
    val: "draft",
    options: [
      { key: "draft", name: "Draft" },
      { key: "review", name: "In review" },
      { key: "published", name: "Published" },
    ],
    is_searchable: true,
  })
</script>

<Dropdown {manager} />
<p>Selected: {manager.val}</p>

API reference

Configure the manager, call its methods, and read its reactive state.

42 entries in configuration

Property	Type	Default	Description
`val`	`any`	`null`	the current selection; can be a single value or array for multiselect
`options`	`array`	`[]`	the array of selectable items; each item can be a simple value or an object
`on_change`	`function`	`null`	callback invoked on each selection, receiving the new val
`on_item_click`	`function`	`null`	callback invoked whenever an item is clicked, receiving the item object
`on_dropdown_opened`	`function`	`null`	callback triggered when the dropdown popover is opened
`on_dropdown_closed`	`function`	`null`	callback triggered when the dropdown popover is closed
`on_search`	`function`	`null`	optional async callback for searching items, called with { input, id } and returning { options }
`label`	`string`	`null`	label text displayed above or near the dropdown
`type`	`string`	`dropdown`	mode: 'dropdown' or 'horiz_selector'
`is_collapsed`	`boolean`	`false`	if true, operates in 'collapsed' mode for toggling
`val_key`	`string`	`key`	key in each option object used to identify the value
`row_display_keys`	`array`	`["name"]`	array of keys from which to build a display string for each row
`button_display_keys`	`array`	`["name"]`	array of keys used to show text in the dropdown button
`is_multiselect`	`boolean`	`false`	if true, multiple values can be selected
`is_set_null_button`	`boolean`	`false`	if true, provides a button to clear the selection
`is_disabled`	`boolean`	`false`	disables the entire control if true
`header`	`string`	`null`	header text for horizontal selector
`header_icon`	`string`	`null`	icon id displayed next to header if using horiz_selector
`header_icon_deg`	`number`	`0`	icon rotation in degrees for the header icon
`min_header_width`	`number`	`2`	minimum width (rem) reserved for the header text in horiz_selector
`spacer_color`	`string`	`var(--shadow2-t)`	color for the vertical spacer in horiz_selector
`error_message`	`string`	`null`	error text displayed under the label
`placeholder`	`string`	`Select`	placeholder text if no selection is made
`target_width`	`number`	`250`	popover width in px
`target_height`	`number`	`200`	popover height in px
`font_weight`	`number`	`500`	font weight for displayed items
`font_size`	`number`	`1.2`	font size (rem) for displayed items
`is_show_x`	`boolean`	`false`	if true, an x to close the popover is shown
`text_align`	`string`	`left`	text alignment for items (left, center, right)
`justify_content`	`string`	`space-between`	justification for label+arrow in the default button
`is_show_arrow`	`boolean`	`true`	if true, an arrow toggle is shown in the button
`button_type`	`string`	`outlined`	style type for the toggle button (primary, outlined, etc.)
`selected_font_size`	`number`	`null`	optional alternate font size used specifically for the selection in the toggle button
`is_button_compressed`	`boolean`	`false`	makes the dropdown button narrower if true
`is_searchable`	`boolean`	`false`	if true, shows a text input for filtering or triggering an on_search callback
`is_hide_button`	`boolean`	`false`	if true, hides the main toggle button for a fully open experience
`anchor_id`	`string`	`null`	specifies the element id to anchor the popover, or defaults to the toggle button
`ml`	`number`	`0`	margin-left in rem for the button
`mr`	`number`	`0`	margin-right in rem for the button
`mt`	`number`	`0`	margin-top in rem for the button
`mb`	`number`	`0`	margin-bottom in rem for the button
`item_mb`	`number`	`0`	margin-bottom in rem for each dropdown item