[BUG] - Type Incompatibility Error when using <Select>

[hieutndev]

HeroUI Version

@heroui/select@2.4.28

Describe the bug

Description

When using the <Select> component in my project, I encountered a TypeScript type incompatibility error related to the label prop.

I’m unsure whether this is a genuine type definition issue in the component’s TypeScript typings or if I’m using the prop incorrectly.

---

Code Example

<Select
  className="w-48"
  items={listCategories}
  label={"Select Category"}
  labelPlacement="outside"
  placeholder="Select category"
  selectedKeys={[transaction.category_id?.toString() ?? "-1"]}
  variant="bordered"
  onChange={(e) =>
    onTransactionUpdate(index, {
      category_id: parseInt(e.target.value),
    })
  }>
  {(category) => (
    <SelectItem
      key={category.category_id}
      textValue={category.category_name}>
      {category.category_name}
    </SelectItem>
  )}
</Select>

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

Code Example

<Select
  className="w-48"
  items={listCategories}
  label={"Select Category"}
  labelPlacement="outside"
  placeholder="Select category"
  selectedKeys={[transaction.category_id?.toString() ?? "-1"]}
  variant="bordered"
  onChange={(e) =>
    onTransactionUpdate(index, {
      category_id: parseInt(e.target.value),
    })
  }>
  {(category) => (
    <SelectItem
      key={category.category_id}
      textValue={category.category_name}>
      {category.category_name}
    </SelectItem>
  )}
</Select>

---

Error Message

Type '"Select Category"' is not assignable to type
'((string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> |
Iterable<ReactNode> | ReactPortal | Promise<...> | null) & keyof string[]) | undefined'.ts(2322)

labelable.d.ts(21, 3): The expected type comes from property 'label'
which is declared here on type 'IntrinsicAttributes & SelectProps<TCategory>'

Expected behavior

Question / Expected Behavior

• Should the label prop accept a plain string (e.g. "Select Category")?
• If the current typings are intentional, could the documentation clarify the correct usage?

Screenshots or Videos

Operating System Version

Window

Browser

Edge

[linear]

ENG-2858

[wingkwong]

I couldn't reproduce the issue on my side. Could you please share a sandbox?