Basic example
The Select component is most useful for gathering information provided by the user from a list of options. Basic select component allows you to choose from a number of options.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function SelectBasicExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} />
</div>
</div>
);
}
Multiselect
Add multiple
prop to the select element to activate multiple mode.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function MultiselectExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} multiple label="Example label" />
</div>
</div>
);
}
Select with label
You can add select label by adding label
prop to the select component.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function SelectWithLabelExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} label="Example label" />
</div>
</div>
);
}
Select with placeholder
Use placeholder
prop to set placeholder for select input. The placeholder will be displayed when input is focused and no option is selected
import React from "react";
import { TESelect } from "tw-elements-react";
export default function SelectWithPlaceholderExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect
data={data}
placeholder="Example placeholder"
preventFirstSelection
/>
</div>
</div>
);
}
Size
Change the size of select input by changing the value of size
prop.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function SizeExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
];
return (
<div className="flex flex-col items-center justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} size="sm" label="Size sm" />
</div>
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} label="Size default" />
</div>
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} size="lg" label="Size lg" />
</div>
</div>
);
}
Disabled select
Add disabled
prop to the select element to disable select input.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function DisabledSelectExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} disabled />
</div>
</div>
);
}
Disabled options
Use disabled
prop on option element to disable specific option.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function DisabledOptionsExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2, disabled: true },
{ text: "Three", value: 3, disabled: true },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} />
</div>
</div>
);
}
Clear button
Add the clearButton
prop to display the button that will allow to clear current selections.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function ClearButtonExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} clearBtn label="Example label" preventFirstSelection />
</div>
</div>
);
}
Custom content
Children
of the TESelect
component will be displayed at the end of the select dropdown.
import React from "react";
import { TESelect, TERipple } from "tw-elements-react";
export default function CustomContentExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data}>
<div className="p-4">
<TERipple rippleColor="white">
<button className="inline-block rounded bg-primary px-4 pb-[5px] pt-[6px] text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]">
Save
</button>
</TERipple>
</div>
</TESelect>
</div>
</div>
);
}
Visible options
Use visibleOptions
prop to change the number of options that will be displayed in the select dropdown without scrolling.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function VisibleOptionsExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} visibleOptions={3} />
</div>
</div>
);
}
Secondary text
Add secondaryText
property to the specific options to display secondary text.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function SecondaryTextExample(): JSX.Element {
const data = [
{ text: "One", value: 1, secondaryText: "Secondary text" },
{ text: "Two", value: 2, secondaryText: "Secondary text" },
{ text: "Three", value: 3, secondaryText: "Secondary text" },
{ text: "Four", value: 4, secondaryText: "Secondary text" },
{ text: "Five", value: 5, secondaryText: "Secondary text" },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} optionHeight={52} />
</div>
</div>
);
}
Search
Add search
prop to enable options filtering.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function SearchExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 },
{ text: "Nine", value: 9 },
{ text: "Ten", value: 10 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} search />
</div>
</div>
);
}
Select with search inside a modal
import React, { useState } from "react";
import {
TESelect,
TERipple,
TEModal,
TEModalDialog,
TEModalContent,
TEModalHeader,
TEModalBody,
TEModalFooter,
} from "tw-elements-react";
export default function SelectWithModalExample(): JSX.Element {
const [showModal, setShowModal] = useState(false);
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 },
];
return (
<div className="flex justify-center">
{/* <!-- Button trigger modal --> */}
<TERipple rippleColor="white">
<button
type="button"
className="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
onClick={() => setShowModal(true)}
>
Launch demo modal
</button>
</TERipple>
{/* <!-- Modal --> */}
<TEModal show={showModal} setShow={setShowModal}>
<TEModalDialog>
<TEModalContent
theme={{
wrapper:
"min-[576px]:shadow-[0_0.5rem_1rem_rgba(#000, 0.15)] pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-700",
}}
>
<TEModalHeader>
{/* <!--Modal title--> */}
<h5 className="text-xl font-medium leading-normal text-neutral-800 dark:text-neutral-200">
Modal title
</h5>
{/* <!--Close button--> */}
<button
type="button"
className="box-content rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none"
onClick={() => setShowModal(false)}
aria-label="Close"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="h-6 w-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6 18L18 6M6 6l12 12"
/>
</svg>
</button>
</TEModalHeader>
{/* <!--Modal body--> */}
<TEModalBody>
<TESelect data={data} />
</TEModalBody>
<TEModalFooter>
<TERipple rippleColor="light">
<button
type="button"
className="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
onClick={() => setShowModal(false)}
>
Close
</button>
</TERipple>
<TERipple rippleColor="light">
<button
type="button"
className="ml-1 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
>
Save changes
</button>
</TERipple>
</TEModalFooter>
</TEModalContent>
</TEModalDialog>
</TEModal>
</div>
);
}
Option groups
It is possible to group options by using optgroup
property.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function OptionGroupsExample(): JSX.Element {
const data = [
{ text: "Label 1", optgroup: true, disabled: true },
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Label 2", optgroup: true, disabled: true },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} />
</div>
</div>
);
}
Select with icons
Add icon
property to the specific options to display the option icon.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function SelectWithIconsExample(): JSX.Element {
const data = [
{
text: "One",
value: 1,
icon: "https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp",
},
{
text: "Two",
value: 2,
icon: "https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp",
},
{
text: "Three",
value: 3,
icon: "https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp",
},
{
text: "Four",
value: 4,
icon: "https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp",
},
{
text: "Five",
value: 5,
icon: "https://tecdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp",
},
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} />
</div>
</div>
);
}
Set value
The selectValue
state value allows to programatically set the component selections.
Single selection
Add single value string to the arguments list to correctly select option with corresponding value in single selection mode
import React, { useState } from "react";
import { TESelect } from "tw-elements-react";
export default function SetValueExample(): JSX.Element {
const [selectValue, setSelectValue] = useState(4);
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect
data={data}
value={selectValue}
onValueChange={(e: any) => {
setSelectValue(e.value);
}}
/>
</div>
</div>
);
}
Multi selection
Add array of string values to the arguments list to correctly select option with corresponding value in multi selection mode.
import React, { useState } from "react";
import { TESelect } from "tw-elements-react";
export default function SelectValueMultipleExample(): JSX.Element {
const [selectValue, setSelectValue] = useState([3, 4, 5]);
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect
data={data}
multiple
value={selectValue}
onValueChange={(e: any) => {
const newValue = e.map((el: any) => el.value);
setSelectValue(newValue);
}}
/>
</div>
</div>
);
}
Select with toggle element
Use the open
and setOpen
props to control the select dropdown visibility.
import React, { useState } from "react";
import { TESelect } from "tw-elements-react";
export default function SelectWithToggle(): JSX.Element {
const [open, setOpen] = useState(false);
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
];
return (
<>
<div className="flex flex-col items-center justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect open={open} setOpen={setOpen} data={data} multiple />
</div>
<button
className="mt-4 inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
onClick={() => setOpen(!open)}
>
Toggle Select
</button>
</div>
</>
);
}
Auto select
Set autoSelect
prop to the Select component to enable selecting on Tab press.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function AutoSelectExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} autoSelect />
</div>
</div>
);
}
Hidden selected option
Add preventFirstSelection
prop to leave select with no selection.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function HiddenSelectedOptionExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect data={data} label="Example label" preventFirstSelection />
</div>
</div>
);
}
Select with CSS classes
In order to use select with additional CSS classes you need to add the className
prop and use CSS classes you want.
import React from "react";
import { TESelect } from "tw-elements-react";
export default function SelectWithCSSExample(): JSX.Element {
const data = [
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 },
];
return (
<div className="flex justify-center">
<div className="relative mb-3 md:w-96 pt-5">
<TESelect className="shadow-xl" data={data} label="Example label" />
</div>
</div>
);
}
Related resources
Tutorials:
If you are looking for more advanced options, try Bootstrap Select from MDBootstrap.