Skip to content

Conversation

@metonym
Copy link
Collaborator

@metonym metonym commented Nov 8, 2025

Supports #2285

Related #2271

DataTable already supports generics for row data, which greatly enhances DX (local IDE typeahead, type safety, etc..).

This PR updates Dropdown with a similar feature. It now supports TypeScript generics on items, allowing type-safe access to custom item properties in callbacks, events, and slots.

This is highly useful when storing/passing additional properties on items.

This change should be backward compatible; omitting the generic type parameter defaults to DropdownItem.

Example Usage

The price and category fields are automatically inferred.

<script lang="ts">
  import { Dropdown } from "carbon-components-svelte";

  const items = [
    { id: "1", text: "Laptop", price: 999, category: "Electronics" },
    { id: "2", text: "Phone", price: 599, category: "Electronics" },
    { id: "3", text: "Desk", price: 299, category: "Furniture" },
  ];
</script>

<Dropdown
  {items}
  selectedId={undefined}
  label="Choose a product"
  titleText="Products"
  on:select={(e) => {
    console.log("selected:", e.detail.selectedItem);
  }}
  let:item
>
  {@const { text, price, category } = item}
  <div>
    <strong>{text}</strong> - ${price}
    <span>({category})</span>
  </div>
</Dropdown>

Screenshot 2025-11-08 at 9 56 01 AM

@metonym metonym merged commit f9da524 into master Nov 8, 2025
7 checks passed
@metonym metonym deleted the dropdown-generics branch November 8, 2025 18:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant