Tag values as links

[subzero79]

Is it possible to change the component that renders the label in the input container. Instead of a tag wrap the tag in a local link (next/link for example) so I can access the details of the rendered value in a different page/form.

Something like

<ChakraNextLink href={`/dash/variation/${value}`}>
  <Tag>{label}</Tag>
</ChakraNextLink>

[csandman]

If by tag you mean the selected options in the select bar, then yeah here's an example of how you could do that:

import NextLink from "next/link";
import { Container, FormControl, FormLabel, Link } from "@chakra-ui/react";
import { Select, chakraComponents } from "chakra-react-select";

export const flavorOptions = [
  { value: "vanilla", label: "Vanilla", href: "/test" },
  { value: "chocolate", label: "Chocolate", href: "/test" },
  { value: "strawberry", label: "Strawberry", href: "/test" },
  { value: "salted-caramel", label: "Salted Caramel", href: "/test" }
];

const components = {
  MultiValueLabel: ({ data, ...props }) => (
    <NextLink href={data.href} passHref>
      <Link>
        <chakraComponents.MultiValueLabel {...props} data={data} />
      </Link>
    </NextLink>
  )
};

const Home = () => (
  <Container mb={16}>
    <FormControl p={4} id="flavors">
      <FormLabel>chakra-react-select demo</FormLabel>
      <Select
        isMulti
        name="flavors"
        instanceId="flavors"
        options={flavorOptions}
        placeholder="Select some flavors..."
        closeMenuOnSelect={false}
        components={components}
      />
    </FormControl>
  </Container>
);

export default Home;

And here's a full CodeSandbox of it: https://codesandbox.io/s/chakra-react-select-next-link-wrapping-multivaluelabel-f23pp7?file=/pages/index.js

Let me know if that's what you mean!

[subzero79]

Yes that was the intention. As usual I missed this entry in the react-select page. Thanks.