Multiselect

Multiselect is a form control, that after the click displays a collapsable list of multiple values which can be used in forms, menus or surveys.

Multiselect enables you to use ↑ and ↓ arrow keys to navigate through options and use ↵ key to select required option.

Basic Multiselect

import React from "react";
import { CDBMultiselect, CDBContainer } from "cdbreact";
export const Multiselect = () => {
// "showing" key:value pair optional
const option = [
    {
      text: "Value 1",
      showing: true,
    },
    {
      text: "Second Value",
      showing: true,
    },
    {
      text: "Third Value",
      showing: true,
    },
    {
      text: "Final Value",
      showing: true,
    },
  ];
  return (
    <CDBContainer>
            <CDBMultiselect options={option} selected="Value" />
    </CDBContainer>
  );
};

Multiselect with Search

import React from "react";
import { CDBMultiselect, CDBContainer } from "cdbreact";
export const Multiselect = () => {
// "showing" key:value pair optional
const option = [
    {
      text: "Value 1",
      showing: true,
    },
    {
      text: "Second Value",
      showing: true,
    },
    {
      text: "Third Value",
      showing: true,
    },
    {
      text: "Final Value",
      showing: true,
    },
  ];
  return (
    <CDBContainer>
        <CDBMultiselect color="secondary" search options={option} selected="Value" />
    </CDBContainer>
  );
};

Multiselect with Submit Option

import React from "react";
import { CDBMultiselect, CDBContainer } from "cdbreact";
export const Multiselect = () => {
// "showing" key:value pair optional
const option = [
    {
      text: "Value 1",
      showing: true,
    },
    {
      text: "Second Value",
      showing: true,
    },
    {
      text: "Third Value",
      showing: true,
    },
    {
      text: "Final Value",
      showing: true,
    },
  ];
  return (
    <CDBContainer>
        <CDBMultiselect color="dark" submit options={option} selected="Value" />
    </CDBContainer>
  );
};

Multiselect with Limited Options

import React from "react";
import { CDBMultiselect, CDBContainer } from "cdbreact";
export const Multiselect = () => {
// "showing" key:value pair optional
const option = [
    {
      text: "Value 1",
      showing: true,
    },
    {
      text: "Second Value",
      showing: true,
    },
    {
      text: "Third Value",
      showing: true,
    },
    {
      text: "Final Value",
      showing: true,
    },
  ];
  return (
    <CDBContainer>
        <CDBMultiselect color="danger" limitedOptions options={option} selected="Value" />
    </CDBContainer>
  );
};

API

In this section you will find advanced information about the Multiselect component. You will find out which modules are required, what are the possibilities of configuring the component, and what events and methods you can use to work with it.

Contrast Multiselect Import Statement

You need to import the Contrast Multiselect component first before using it.

import { CDBMultiselect } from "cdbreact";

API Reference: Contrast Multiselect Properties

The table below shows the configuration options of the CDBMultiselect component.