Custom layout for select items

[sathish-a]

Hi, I would like to understand how to add a custom design for the items in the select component. My requirement is simply show images along with text when the select component is clicked.

Here is my current implementation, but I'm unable to compile it.

def select_item_layout(name, icon):
    item = rx.flex(
        rx.image(src=icon),
        rx.text(
            name,
            size="2",
            mb="1",
            color_scheme="gray",
        ),
        direction="row",
    )
    return item
    
rx.select(
            [
                select_item_layout("box", "/menu.png"),
                select_item_layout("left_fill", "/left.png"),
                select_item_layout("right_fill", "/right.png"),
                select_item_layout("fill_page", "/minimize.png"),
            ], 
            default_value="box",
),

This is the error I got.

TypeError: Invalid var passed for prop value, expected type <class 'str'>, got value <RadixThemesFlex direction={`row`}>
  <img src={`/menu.png`}/>
  <RadixThemesText as={`p`} color={`gray`} css={{"mb": "1"}} size={`2`}>
  {`box`}
</RadixThemesText>
</RadixThemesFlex> of type <class 'reflex.components.radix.themes.layout.flex.Flex'>.

Please help!

Thanks in advance.

[picklelo]

See the low-level docs for select which show how to do more customizability