Apply SGDS styles to react-select library for a more cohesive look within SGDS-based projects.


Install the following packages via npm:

$ npm i @govtechsg/sgds bootstrap-icons react-select



Tested against: react-select@^5.4.0

To integrate sgds styles into your React application with react-select components, follow these steps:

  1. Create a css file with the following contents
/** sgds-x-react-select.css */
.sgds-x-react-select-container .sgds-x-react-select__control {
    border: 1px solid #98a2b3;
.sgds-x-react-select-container .sgds-x-react-select__control--is-focused {
    box-shadow: none;
.sgds-x-react-select__menu .sgds-x-react-select__option--is-focused {
    background-color: var(--sgds-gray-200);
.sgds-x-react-select__menu .sgds-x-react-select__option--is-selected {
    background-color: var(--sgds-primary);
.sgds-x-react-select__menu .sgds-x-react-select__option:active {
    background-color: var(--sgds-gray-300);
.sgds-x-react-select__value-container .sgds-x-react-select__multi-value {
    background-color: var(--sgds-primary);
    color: var(--sgds-white);
.sgds-x-react-select__multi-value .sgds-x-react-select__multi-value__label {
    color: var(--sgds-white);
    .sgds-x-react-select__multi-value__remove:hover {
    background-color: var(--sgds-primary);
    color: var(--sgds-white);
  1. Import the Select component from react-select along with the required styles:
import Select, { components } from "react-select";
import "@govtechsg/sgds/css/sgds.css";
import "./sgds-x-react-select.css";
import "bootstrap-icons/font/bootstrap-icons.css";
  1. Utilize the provided Select component within your application, ensuring the use of specific class names for SGDS styles:
const OPTIONS = [
    { value: "chocolate", label: "Chocolate" },
    { value: "strawberry", label: "Strawberry" },
    { value: "vanilla", label: "Vanilla" },

const DropdownIndicator = (props) => {
    return (
        <components.DropdownIndicator {...props}>
            <i className="bi bi-search form-control-icon"></i>

const App = () => {
    return (
            // Other react-select props

export default App;

Note: Ensure that the className prop is set to "sgds-x-react-select-container" and classNamePrefix prop is set to "sgds-x-react-select" for your Select component to acquire the SGDS styling. Following these exact class names is essential to apply the SGDS styles correctly.

Last updated 04 June 2024

Latest version 2.3.3