component

Select

props · 33 shown · 33 total

State

  • defaultValue svelte
    SelectValue

    Initial selection (uncontrolled). Single: a key or `null`; multiple: keys.

  • disabled
    boolean
    default false

    Disable the whole select: the trigger leaves the tab order (`aria-disabled` + `tabindex="-1"`) and ignores pointer/keyboard input.

  • disabledKeys svelte
    Iterable<Key>

    Keys that cannot be selected or focused.

  • feedback
    "inherit" "danger" "neutral" "primary" "success" "warning"
    default neutral

    Validation feedback styling for the trigger.

  • isLoading
    boolean
    default false

    Show the loading row instead of options (for async fetches).

  • open svelte
    boolean

    Bindable open state.

  • required
    boolean
    default false

    Marks the control required for native form validation (on the hidden `<select>`).

  • value svelte
    SelectValue

    Bindable current selection. Single: a key or `null`; multiple: an array of keys.

Appearance

  • background
    "transparent" "surface.peak" "surface.hill" "surface.base" "surface.valley" "surface.ground"
    default surface.ground

    Background fill for the trigger.

  • listboxBackground
    "transparent" "surface.peak" "surface.hill" "surface.base" "surface.valley" "surface.ground"
    default "surface.peak"

    Surface ramp step the popup list paints.

  • listboxBorder
    "none" "default" "bold" "muted" "accent"
    default "muted"

    Resting border color of the popup list surface.

  • listboxRadius
    "lg" "md" "sm" "xs" "inherit" "2xl" "xl" "inner" "none" "2xs" "3xl" "4xl" "5xl" "6xl" "full"
    default "md"

    Corner radius of the popup list surface. The list is a Panel nested inside a transparent, unpadded popover `<dialog>`, so its own `radius="inner"` would resolve against that dialog's `xl` corner rather than the trigger — pass the corner you want explicitly.

  • listboxShadow
    "lg" "md" "sm" "xs" "xl" "none"

    Elevation of the popup list surface. Floating popups get `lg` from the listbox recipe's `[data-popover]` rule by default.

  • placeholder
    string

    Placeholder text shown in the trigger when nothing is selected.

  • size
    "lg" "md" "sm" "xs"
    default "md"

    Trigger and option size.

Layout

  • chipMaxChars
    number

    Truncate inline chip labels to this many characters (appending `…`).

  • chipMaxWidth
    string

    CSS `max-width` (e.g. `"8rem"`) applied to inline chip labels with ellipsis truncation.

  • chipOverflow
    number false "auto"
    default 2

    Cap the inline chip footprint in multiselect. A `number` shows the last N selected chips inline and collapses the rest behind a "+N" overflow chip; `"auto"` measures the trigger and fits as many chips as the width allows; `false` disables collapsing entirely so every chip renders inline.

  • fullWidth
    boolean
    default false

    Stretch the trigger to fill its container.

  • placement
    "top" "right" "bottom" "left" "top-start" "top-end" "right-start" "right-end" "bottom-start" "bottom-end" "left-start" "left-end"
    default "bottom-start"

    Floating-UI placement of the popup.

Behavior

  • clearable
    boolean
    default false

    Show a clear (×) button to reset the selection when something is selected.

  • form
    string

    Associates the control with a `<form>` by id (the native `form` attribute), so it can live outside the form element. Applied to the hidden `<select>`.

  • items required
    ListBoxNodeInput[]

    The options to choose from, in render order. An option is `{ id, label, description?, eyebrow?, leading?, trailing?, textValue?, disabled? }`; a section is `{ id, type: "section", title?, items }`.

  • name
    string

    Form field name. When set, the selection posts with a surrounding `<form>` via a hidden native `<select>` (autofill + native validation + `FormData`); very large option lists fall back to hidden `<input>`s.

  • onOpenChange svelte
    (open: boolean) => void

    Fires when the open state changes.

  • onValueChange svelte
    (value: SelectValue) => void

    Fires when the selection changes.

  • selectionMode
    "single" "multiple"
    default "single"

    `"single"` commits one value and closes; `"multiple"` toggles removable chips and keeps the popup open.

Slots

  • empty slot svelte
    Snippet

    Content shown when there are no options.

  • leading slot svelte
    Snippet

    Leading content inside the trigger (e.g. an icon).

  • loading slot svelte
    Snippet

    Content shown while `isLoading`.

Advanced

  • element binding svelte
    HTMLDivElement null

    Bindable reference to the focusable trigger `<div>`.

  • id svelte
    string

    Consumer id. Lands on the hidden native `<select>` (the labelable form element), so `<label for={id}>` focuses the Select without `<Field>`. Internal ids (trigger/listbox/popover) derive from a stable generated base.

  • passThrough
    SelectPassThrough

    Per-slot style / attribute override bag for customizing any rendered slot or composed child component.

Plus all standard <div> HTML attributes.

Type

  • Components
  • Blocks