Select

React Bootstrap 5 Select

When selected, React Bootstrap 5 Select displays a collapsible list of numerous options, and it may be used in forms, menus, and surveys.

React Bootstrap 5 Select is a very useful component that the ↑ and ↓ arrow keys can be used to browse through options and the ↵ key to select the required option (works for stateful select).

Importing the React Bootstrap 5 Select Component

For you to use the React Bootstrap 5 Select components, you will need to import CDBSelect into your project.

import { CDBSelect } from 'cdbreact';

CDB Select

The CDBSelect prop takes in an option prop whose value is an array of different user options.

import React, { useState } from 'react';
import { CDBSelect, CDBContainer } from 'cdbreact';

export const Select = () => {
  const [option] = useState([
    {
      text: 'Option 1',
      value: '1',
    },
    {
      text: 'Option 2',
      value: '2',
    },
    {
      text: 'Option 3',
      value: '3',
    },
  ]);

  return (
    <CDBContainer>
      <CDBSelect options={option} selected="Choose an option" />
    </CDBContainer>
  );
};

API Reference: Contrast React Bootstrap 5 Select Props

This section will elaborate on the props available with the Contrast React Bootstrap 5 Select component. You'll learn what these props do, how to utilize them, and what their default values are.

You can check other props options of the CDBSelect on the table below.

Name	Type	Default	Description	Example
className	String	Adds custom classes	Adds custom classes	<CDBSelect className="myClass" ... />
tag	String	div	Changes default tag	<CDBSelect tag="input" ... />
selected	String		Set default select text content.	<CDBSelect2 selected="Choose one" ... />
options	Array of Objects		Sets options array as source of data. This property is used in alternative `Select****2` version.	<CDBSelect2 options={options}" ... />

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.

Spinner

Switch