Combobox (React Select)

// This component requires the following additional import:
// import { Select as ReactSelect } from 'chakra-react-select'

<Stack gap="10">
    <FormControl isRequired>
        <FormLabel>Single select (required)</FormLabel>
        <ReactSelect
            useBasicStyles
            selectedOptionStyle="check"
            options={[
                {
                    label: 'Content',
                    value: 'content',
                },
                {
                    label: 'Engagement',
                    value: 'engagement',
                },
                {
                    label: 'Commerce',
                    value: 'commerce',
                },
            ]}
        />
    </FormControl>
    <FormControl>
        <FormLabel>Single select (optional)</FormLabel>
        <ReactSelect
            isClearable
            useBasicStyles
            selectedOptionStyle="check"
            options={[
                {
                    label: 'Content',
                    value: 'content',
                },
                {
                    label: 'Engagement',
                    value: 'engagement',
                },
                {
                    label: 'Commerce',
                    value: 'commerce',
                },
            ]}
        />
    </FormControl>
    <FormControl>
        <FormLabel>Multi select</FormLabel>
        <ReactSelect
            useBasicStyles
            isMulti
            closeMenuOnSelect={false}
            options={[
                {
                    label: 'Content',
                    value: 'content',
                },
                {
                    label: 'Engagement',
                    value: 'engagement',
                },
                {
                    label: 'Commerce',
                    value: 'commerce',
                },
            ]}
        />
    </FormControl>
</Stack>