🤩
Windframe Import Update is finally here.

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.

js
import { CDBSelect } from 'cdbreact';

CDB Select

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

js
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.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classesAdds custom classes<CDBSelect className="myClass" ... />
tagStringdivChanges default tag<CDBSelect tag="input" ... />
selectedStringSet default select text content.<CDBSelect2 selected="Choose one" ... />
optionsArray of ObjectsSets options array as source of data. This property is used in alternative Select****2 version.<CDBSelect2 options={options}" ... />

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help 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 UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast