Replies: 3 comments 2 replies
-
I'm not sure exactly what you mean, do you mean a max number of options that can be selected in a multi-select? |
Beta Was this translation helpful? Give feedback.
-
Yes, I meant that
…On Mon, 11 Jul 2022, 22:36 Chris Sandvik, ***@***.***> wrote:
I'm not sure exactly what you mean, do you mean a max number of options
that can be selected in a multi-select?
—
Reply to this email directly, view it on GitHub
<#158 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ASZRZB64PXBW3CHDV2NTBCTVTRH7ZANCNFSM53DU3RSQ>
.
You are receiving this because you authored the thread.Message ID:
***@***.***
.com>
|
Beta Was this translation helpful? Give feedback.
-
This is not something that would be handled by this library directly, you'd have to add some custom logic to enable this functionality. With a Google search, I see plenty of examples from the original library
Here's one way you could do it by replacing the list of options with a single disabled option: import React, { useState } from "react";
import { Container, FormControl, FormLabel } from "@chakra-ui/react";
import { Select } from "chakra-react-select";
import { stateOptions } from "./data/data";
const MAX_SELECTED = 4;
const maxSelectedOptions = [
{
isDisabled: true,
value: "max",
label: "You have selected the max number of states"
}
];
const Example = () => {
const [selectedStates, setSelectedStates] = useState([]);
const isMaxed = selectedStates.length === MAX_SELECTED;
return (
<Container mb={16}>
<FormControl p={4}>
<FormLabel>
Select up to {MAX_SELECTED} states you want to visit
</FormLabel>
<Select
isMulti
name="states"
options={isMaxed ? maxSelectedOptions : stateOptions}
value={selectedStates}
onChange={setSelectedStates}
placeholder="Select some states..."
closeMenuOnSelect={false}
/>
</FormControl>
</Container>
);
};
export default Example; CodeSandbox: https://codesandbox.io/s/chakra-react-select-max-selected-options-5u36gx?file=/example.js |
Beta Was this translation helpful? Give feedback.
-
How can i set max values that can be selected?
Beta Was this translation helpful? Give feedback.
All reactions