Skip to content
Melt UI

Select

Presents a selection of choices to the user, activated by a button.

Props

Features

  • 🎹 Keyboard navigation
  • 🍃 Multi-selection mode
  • 🧠 Smart focus management
  • 💬 Highlight items by typing them out (typeahead)

Usage

<script lang="ts">
  import { Select } from "melt/builders";


  const select = new Select();
</script>


<div {...select.root}>
  Select content
</div>

API Reference

Constructor Props

The props that are passed when calling 
new Select()
    export type SelectProps<T extends string, Multiple extends boolean = false> = PopoverProps & {
      /**
       * If `true`, multiple options can be selected at the same time.
       *
       * @default false
       */
      multiple?: MaybeGetter<Multiple | undefined>;
    

      /**
       * The value for the Select.
       *
       * When passing a getter, it will be used as source of truth,
       * meaning that the value only changes when the getter returns a new value.
       *
       * Otherwise, if passing a static value, it'll serve as the default value.
       *
       *
       * @default false
       */
      value?: MaybeMultiple<T, Multiple>;
      /**
       * Called when the value is supposed to change.
       */
      onValueChange?: OnMultipleChange<T, Multiple>;
    

      /**
       * How many time (in ms) the typeahead string is held before it is cleared
       * @default 500
       */
      typeaheadTimeout?: MaybeGetter<number | undefined>;
    };

Methods

The methods returned from 
new Select()

  • getOptionId 

    (value: T) => string

  • getOption 

    (value: T) => {
      readonly "data-melt-select-option": ""
      readonly "data-value": DataReturn<T>
      readonly "aria-hidden": true | undefined
      readonly "aria-selected": boolean
      readonly "data-highlighted": boolean
      readonly role: "option"
      readonly onmouseover: () => void
      readonly onclick: () => void
    }

Properties

The properties returned from 
new Select()

  • multiple 

    Multiple extends null | undefined
      ? Multiple | undefined
      : Multiple | Exclude<Multiple, null | undefined>

  • highlighted 

    T | null

  • typeaheadTimeout 

    number

  • typeahead 

    (letter: string) => { value: T; current: boolean } | undefined

  • value 

    SelectionStateValue<T, Multiple>

  • trigger 

    {
      readonly onfocusout: () => Promise<void>
      readonly "data-melt-popover-trigger": ""
      readonly id: string
      readonly popovertarget: string
      readonly onclick: (e: Event) => void
    } & {
      "data-melt-select-trigger": string
      role: string
      "aria-expanded": boolean
      "aria-controls": string
      "aria-owns": string
      onkeydown: (e: KeyboardEvent) => void
    }

  • content 

    {
      readonly onfocusout: () => Promise<void>
      readonly "data-melt-popover-content": ""
      readonly id: string
      readonly popover: "manual"
      readonly ontoggle: (
        e: ToggleEvent & { currentTarget: EventTarget & HTMLElement },
      ) => void
      readonly tabindex: -1
      readonly inert: boolean
      readonly "data-open": "" | undefined
    } & {
      readonly "data-melt-select-content": ""
      readonly role: "listbox"
      readonly "aria-expanded": boolean
      readonly "aria-activedescendant": string | undefined
      readonly onkeydown: (e: KeyboardEvent) => void
    }