🤩
Windframe Import update is finally here!

Select 2

React Bootstrap 5 Select 2

The React Bootstrap 5 Select component is the pro version of the React Bootstrap 5 Select2 component,, CDBSelect. For your select button, there are several predefined styles. To use in your project, get the CDB pro version.

Importing the Contrast Select2 Component

Import 'CDBSelect2' into your app to use the Contrast React Bootstrap 5 Rating component.

js
import { CDBSelect2 } from "cdbreact";

Select Button

Pro Component
Contrast React Bootstrap 5 Default Select2 button
js
import React from "react";
import { CDBSelect2, CDBContainer } from "cdbreact";
export const Select = () => {
const [option] = useState([
{
text: "Select Option",
icon:"stack-overflow",
},
{
text: "Another Option",
icon:"reddit",
},
{
text: "Option 3",
icon:"instagram",
},
{
text: "Option 4",
},
{
text: "Last Option",
},
]);
return (
<CDBContainer>
<CDBSelect2 options={option} iconBrand selected="Choose an option" color="white"/>
</CDBContainer>
);
};

Disabled Select Button

Pro Component

To make the select button inactive, use the disabled prop.

Contrast React Bootstrap 5 Disabled Select2 Button
js
import React from "react";
import { CDBSelect2, CDBContainer } from "cdbreact";
export const Select = () => {
const [option] = useState([
{
text: "Select Option",
icon:"stack-overflow",
},
{
text: "Another Option",
icon:"reddit",
},
{
text: "Option 3",
icon:"instagram",
},
{
text: "Option 4",
},
{
text: "Last Option",
},
]);
return (
<CDBContainer>
<CDBSelect2 options={option} iconBrand selected="Choose an option" disabled color="none" />
</CDBContainer>
);
};

Colored Select Button

Pro Component

You can change the background color of the select button with the 'color' prop.

Contrast React Bootstrap 5 Colored Select2 Button
js
import React from "react";
import { CDBSelect2, CDBContainer } from "cdbreact";
export const Select = () => {
const [option] = useState([
{
text: "Select Option",
icon:"stack-overflow",
},
{
text: "Another Option",
icon:"reddit",
},
{
text: "Option 3",
icon:"instagram",
},
{
text: "Option 4",
},
{
text: "Last Option",
},
]);
return (
<CDBContainer>
<CDBSelect2 options={option} iconBrand selected="Choose an option" color="primary" />
<CDBSelect2 options={option} iconBrand selected="Choose an option" color="secondary" />
<CDBSelect2 options={option} iconBrand selected="Choose an option" color="success" />
<CDBSelect2 options={option} iconBrand selected="Choose an option" color="warning" />
<CDBSelect2 options={option} iconBrand selected="Choose an option" color="dark" />
</CDBContainer>
);
};

Colored Buttons with Hover Color

Pro Component

The hoverColor component adds a hover effect to your selected options.

Contrast React Bootstrap 5 Colored Select2 Buttons with Hover
js
import React from "react";
import { CDBSelect2, CDBContainer } from "cdbreact";
export const Select = () => {
const [option] = useState([
{
text: "Select Option",
icon:"stack-overflow",
},
{
text: "Another Option",
icon:"reddit",
},
{
text: "Option 3",
icon:"instagram",
},
{
text: "Option 4",
},
{
text: "Last Option",
},
]);
return (
<CDBContainer>
<CDBSelect2 options={option} iconBrand selected="Choose an option" hoverColor color="danger" />
</CDBContainer>
);
};

CDBSelect

Pro Component
js
import React from "react";
import { CDBSelect, CDBContainer } from "cdbreact";
export const Select = () => {
const option = useState([
{
text: "Select Option",
icon:"stack-overflow",
},
{
text: "Another Option",
icon:"reddit",
},
{
text: "Option 3",
icon:"instagram",
},
{
text: "Option 4",
},
{
text: "Last Option",
},
]);
return (
<CDBContainer>
<CDBSelect selected="Options" options={option}/>
</CDBContainer>
);
};

API Reference: Contrast React Bootstrap 5 Select2 Props

The props you get to use with the Contrast React Bootstrap 5 Select2 component will be elaborated on in this section. You'll understand what these props are for, how to use them in your code, and what their default values are.

Other 'CDBSelect2' prop options are listed below in the table

NameTypeDefaultDescriptionExample
classNameStringAdds custom classes<CDBSelect2 className="myClass" ... />
tagStringdivChanges default tag<CDBSelect2 tag="div" ... />
disableBooleanfalseIf true - the option wont be clickable.<CDBSelect2 disabled .../>
colorStringSets colorful hover effect on select options.<CDBSelect2 color="primary" ... />
iconSizeStringSets size of icon brand in select option<CDBSelect2 iconSize="20px" ... />
iconBrandBooleanfalseadds icon to the select option<CDBSelect2 iconBrand .../>
iconLightBooleanfalseSets the icon light<CDBSelect2 iconLight .../>
iconRegularBooleanfalseSets the icon regular<CDBSelect2 iconRegular .../>
iconClassStringAdds custom class to icon<CDBSelect2 iconClass="myClass" ... />
optionsArray of ObjectsSets options array as source of data. This property is used in alternative Select version.<CDBSelect2 options={options}" ... />
hoverColorBooleanfalseSets hover effect on select options.<CDBSelect2 hoverColor .../>
selectedStringSet default select text content.<CDBSelect2 selected="Choose one" ... />
optionClassNameStringAdds custom classes to options<CDBSelect2 optionClassName="my-class" ... />

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