Skip to content

Conversation

@BrknRules
Copy link

@BrknRules BrknRules commented Jan 28, 2026

This adds a renderValue prop to Picker S2, which allows users to render custom elements within the Picker's select based off of selected items (could also just render a custom element regardless of selection as well, TBD).

To Do

  • Bikeshed prop name (renderSelectedItems, renderValue, ...?)
  • Implement types
    • Improve renderValue type, atm just uses SelectValue.children but should restrict
  • Implement rendering custom react elements based off of selected items
  • Tests
  • Docs

Questions

  1. Should we enforce that the custom value element only be for when options have been selected? Somebody might have a use case for a static button element.
  2. Should custom placeholder elements be allowed? Would this be done through the placeholder or overridden in renderValue
  3. Would renderValue: (selected: Selection) => ReactNode be too restrictive? Should we allow SelectValue's ability to handle defaultChildren, placeholders, etc?
  4. Style restrictions?

* Custom renderer for the selected value shown in the button.
* Matches the `SelectValue` children render type.
*/
renderValue?: SelectValueProps<T>['children']
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should just pass in the selected items (i.e. (selectedItems: T[]) => ReactNode) here, and only call it when there is at least one item selected. We already have the placeholder prop to customize the placeholder text, and you can omit renderValue if you want the default text. Is that sufficient for your use case or did you need one of the other render props?

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.

2 participants