{"id":24979930,"url":"https://github.com/onesine/react-tailwindcss-select","last_synced_at":"2025-04-04T07:08:51.075Z","repository":{"id":53552918,"uuid":"521465572","full_name":"onesine/react-tailwindcss-select","owner":"onesine","description":"Tailwind Select Component for React.js","archived":false,"fork":false,"pushed_at":"2024-06-28T07:21:12.000Z","size":1102,"stargazers_count":196,"open_issues_count":43,"forks_count":45,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T06:09:35.944Z","etag":null,"topics":["react","reactjs","select","tailwindcss"],"latest_commit_sha":null,"homepage":"https://demo-react-tailwindcss-select.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/onesine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-08-05T01:30:17.000Z","updated_at":"2025-03-04T01:34:38.000Z","dependencies_parsed_at":"2024-06-18T15:28:53.590Z","dependency_job_id":"e7ced9dd-6e64-410d-99fb-ae095ca7d6f6","html_url":"https://github.com/onesine/react-tailwindcss-select","commit_stats":{"total_commits":120,"total_committers":7,"mean_commits":"17.142857142857142","dds":0.3583333333333333,"last_synced_commit":"20a427e028165b573e28a6e3ee8a54ba3b12597f"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onesine%2Freact-tailwindcss-select","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onesine%2Freact-tailwindcss-select/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onesine%2Freact-tailwindcss-select/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/onesine%2Freact-tailwindcss-select/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/onesine","download_url":"https://codeload.github.com/onesine/react-tailwindcss-select/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247135144,"owners_count":20889421,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","reactjs","select","tailwindcss"],"created_at":"2025-02-04T04:15:49.793Z","updated_at":"2025-04-04T07:08:51.054Z","avatar_url":"https://github.com/onesine.png","language":"TypeScript","readme":"\u003ch1 align=\"center\" style=\"border-bottom: 0 white\"\u003e\n    📦 React tailwindcss select\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n    React-tailwindcss-select is a simple component ready to be inserted into your project \u003cbr\u003e This component inspired by \u003ca href=\"https://react-select.com\"\u003eReact-select\u003c/a\u003e is a select input made with \u003ca href=\"https://tailwindcss.com/\"\u003eTailwindcss\u003c/a\u003e and \u003ca href=\"https://reactjs.com\"\u003eReact\u003c/a\u003e.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/onesine/react-tailwindcss-select/blob/master/LICENSE\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/l/react-tailwindcss-select.svg\" alt=\"MIT License\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/react-tailwindcss-select\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/react-tailwindcss-select.svg\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://github.com/yarnpkg/berry\"\u003e\n        \u003cimg src=\"https://img.shields.io/badge/developed%20with-Yarn%202-blue\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n\n-   ✅ Select field for a single item\n-   ✅ Selection field for multiple items\n-   ✅ Optional button to clear the field\n-   ✅ Optional search for an item\n-   ✅ Optional deactivation of an option\n-   ✅ TypeScript support\n-   ✅ Group options\n-   ✅ Customization of the select field style\n-   ⬜ Fixed Options (multiple items select)\n\n## Why ❔\n\nA select with the above features is above all indispensable in many projects. On a project using\ntailwindcss, when I install [react-select](https://react-select.com) or other such packages, the\nstyle of the latter is affected by that of [tailwind](https://tailwindcss.com/).\n\nRather than looking for a component that uses [tailwind](https://tailwindcss.com/), I preferred to\nmake my own based on react-select which I like (and also because I generally like to reinvent the\nwheel 😅).\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/onesine/react-tailwindcss-select/master/assets/img/Screen_Shot_2022-08-04_at_17.04.09.png\" alt=\"preview react-tailwindcss-select\"\u003e\n\u003c/p\u003e\n\n## Online Demo\n\nYou can find the online demo at [here](https://demo-react-tailwindcss-select.vercel.app/)\n\n## Install\n\nYou can use yarn\n\n```bash\nyarn add react-tailwindcss-select\n```\n\nOr via npm\n\n```bash\nnpm install react-tailwindcss-select\n```\n\nmake sure you have installed the peer dependencies as well with the below versions.\n\n```\n\"react\": \"^18.2.0\"\n```\n\n## Usage\n\nThis component also exports a tiny CSS file built by tailwind. All CSS classes used in designing and\ncustomizing the select component are all custom tailwind classes which ensures that an existing\ntailwind project would not need to include this CSS file again.\n\n### Tailwind Project\n\nA tailwind project would only have to import the react component using\n`import Select from 'react-tailwindcss-select'` and specify the component in the tailwind\nconfiguration to generate the styles of the classes used by react-tailwindcss-select.\n\nUse this code to add the component to the tailwind configuration\n\n```javascript\n// in your tailwind.config.js\nmodule.exports = {\n    // ...\n    content: [\n        \"./src/**/*.{js,jsx,ts,tsx}\",\n        \"./node_modules/react-tailwindcss-select/dist/index.esm.js\"\n    ]\n    // ...\n};\n```\n\n### None Tailwind Project\n\nOn a project that does not use tailwind, you need to import the component's CSS as well. To do this\nuse these two codes: `import Select from 'react-tailwindcss-select'` and\n`import 'react-tailwindcss-select/dist/index.css'`\n\n\u003e **Warning**\n\u003e\n\u003e In this case when you don't use tailwind on your project, think about isolating the component and\n\u003e its style so that tailwind doesn't affect the style of the elements in your project. For this, you\n\u003e can use the\n\u003e [shadow dom](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM).\n\nThen use react-tailwindcss-select in your app:\n\n#### With React Component\n\n```javascript\nimport React from \"react\";\nimport Select from \"react-tailwindcss-select\";\n\nconst options = [\n    { value: \"fox\", label: \"🦊 Fox\" },\n    { value: \"Butterfly\", label: \"🦋 Butterfly\" },\n    { value: \"Honeybee\", label: \"🐝 Honeybee\" }\n];\n\nclass App extends React.Component {\n    constructor(props) {\n        super(props);\n        this.state = { animal: null };\n\n        this.handleChange = this.handleChange.bind(this);\n    }\n\n    handleChange(value) {\n        console.log(\"value:\", value);\n        this.setState({ animal: value });\n    }\n\n    render() {\n        const { animal } = this.state;\n\n        return (\n            \u003cSelect\n                value={animal}\n                onChange={this.handleChange}\n                options={options}\n            /\u003e\n        );\n    }\n}\n```\n\n#### With React Hooks\n\n```javascript\nimport { useState } from \"react\";\nimport Select from \"react-tailwindcss-select\";\n\nconst options = [\n    { value: \"fox\", label: \"🦊 Fox\" },\n    { value: \"Butterfly\", label: \"🦋 Butterfly\" },\n    { value: \"Honeybee\", label: \"🐝 Honeybee\" }\n];\n\nconst App = () =\u003e {\n    const [animal, setAnimal] = useState(null);\n\n    const handleChange = value =\u003e {\n        console.log(\"value:\", value);\n        setAnimal(value);\n    };\n\n    return (\n        \u003cSelect\n            value={animal}\n            onChange={handleChange}\n            options={options}\n        /\u003e\n    );\n};\n\nexport default App;\n```\n\n## Theming options\n\n**Supported themes**\n![Theme supported](https://raw.githubusercontent.com/onesine/react-tailwindcss-datepicker/master/assets/img/Screen_Shot_2022-08-04_at_17.04.09_theme.png?raw=true)\n\nTo change the default theme, simply add the `primaryColor` props to your select field with the theme\nvalue. By default, the `primaryColor` is set to `blue`\n\n### Indigo example\n\n```javascript\nimport { useState } from \"react\";\nimport Select from \"react-tailwindcss-select\";\n\nconst options = [\n    { value: \"fox\", label: \"🦊 Fox\" },\n    { value: \"Butterfly\", label: \"🦋 Butterfly\" },\n    { value: \"Honeybee\", label: \"🐝 Honeybee\" }\n];\n\nconst App = () =\u003e {\n    const [animal, setAnimal] = useState(null);\n\n    const handleChange = value =\u003e {\n        console.log(\"value:\", value);\n        setAnimal(value);\n    };\n\n    return (\n        \u003cSelect\n            primaryColor={\"indigo\"}\n            value={animal}\n            onChange={handleChange}\n            options={options}\n        /\u003e\n    );\n};\n\nexport default App;\n```\n\n## Props\n\nThis table shows all the options available in react-tailwindcss-select.\n\n| Option                                        | Type       | Default            | Description                                                                            |\n|-----------------------------------------------|------------|--------------------|----------------------------------------------------------------------------------------|\n| [`classNames`](#classNames)                   | `Object`   | `undefined`        | This prop allows you to style most of the components used by this library.             |\n| `isClearable`                                 | `Boolean`  | `true`             | Indicates if you can empty the select field.                                           |\n| `isDisabled`                                  | `Boolean`  | `false`            | Indicates if you can disable the select field.                                         |\n| `isMultiple`                                  | `Boolean`  | `false`            | Indicates if you can do a multiple selection.                                          |\n| `isSearchable`                                | `Boolean`  | `false`            | Indicates if you can search the elements of the select field.                          |\n| [`formatGroupLabel`](#formatGroupLabel)       | `Function` | `null`             | Allows you to use a custom rendering template for each subgroup title                  |\n| [`formatOptionLabel`](#formatOptionLabel)     | `Function` | `null`             | Allows you to use a custom rendering template for each option in the list              |\n| `loading`                                     | `Boolean`  | `false`            | Indicates if you want a loader to appear in the field.                                 |\n| `menuIsOpen`                                  | `Boolean`  | `false`            | Indicates if you want the options menu to be displayed by default.                     |\n| `noOptionsMessage`                            | `String`   | `No results found` | Default message when there is no option in the select field.                           |\n| [`onChange`](#onChange)                       | `Function` |                    | This callback, if present, is triggered when the select field value is modified.       |\n| [`onSearchInputChange`](#onSearchInputChange) | `Function` |                    | This callback, if present, is triggered when the search input field value is modified. |\n| [`options`](#options)                         | `Array`    | `[]`               | All options or options groups available in the selection field.                        |\n| `placeholder`                                 | `String`   | `Select...`        | The placeholder shown for the select field.                                            |\n| `primaryColor`                                | `String`   | `blue`             | Default theme of the field.                                                            |\n| `searchInputPlaceholder`                      | `String`   | `Search...`        | The placeholder shown for the search input field.                                      |\n| [`value`](#value)                             | `Object`   | `null`             | Current value of select field.                                                         |\n\n### onChange\n\nThis callback, if present, is triggered when the select field value is modified. This callback takes\nas a parameter the current value(s) selected. These values respect the same structure as the\nelements of the options.\n\n```js\ncurrentValue =\u003e {\n    console.log(\"currentValue:\", currentValue);\n};\n```\n\n### onSearchInputChange\n\nThis callback, if present, is triggered when the search input field value is modified. This callback takes\nas parameter a `React.ChangeEvent\u003cHTMLInputElement\u003e`.\n\n```js\ne =\u003e {\n    console.log(\"value:\", e.target.value);\n};\n```\n\n### options\n\nAll options are available in the select field. Each option element must have a `value` property that\nserves as an identifier for the element, a `label` property that is the text that is displayed in\nthe options list, and an optional `disabled` property to specify whether the element is active.\n\n```js\n// default element\nconst options = [{ value: \"fox\", label: \"🦊 Fox\" }];\n// default element with `disabled`\nconst options = [{ value: \"fox\", label: \"🦊 Fox\", disabled: true }];\n```\n\n#### Group item\n\nIf you want to group options you can use the following code.\n\n```js\nconst options = [\n    {\n        label: \"Mammal\",\n        options: [\n            { value: \"Dolphin\", label: \"🐬 Dolphin\" },\n            { value: \"Giraffe\", label: \"🦒 Giraffe\" }\n        ]\n    },\n    {\n        label: \"Carnivore\",\n        options: [\n            { value: \"Tiger\", label: \"🐅 Tiger\" },\n            { value: \"Lion\", label: \"🦁 Lion\" }\n        ]\n    },\n    // 👉 You can put the grouped and ungrouped options together\n    { value: \"Zombie\", label: \"🧟 Zombie\" }\n];\n```\n\n\u003e **Info**\n\u003e\n\u003e 👉 You can put the grouped and ungrouped options together.\n\n### value\n\nThe current value of the select field. These objects must follow the same structure as an `options`\nelement. Thus, the following would work:\n\n```js\n// default element Simple Select\nconst value = { value: \"fox\", label: \"🦊 Fox\" };\n// default element with `disabled` Simple Select\nconst value = { value: \"fox\", label: \"🦊 Fox\", disabled: true };\n// default element Multiple Select\nconst value = [{ value: \"fox\", label: \"🦊 Fox\" }];\n// default element with `disabled` Multiple Select\nconst value = [{ value: \"fox\", label: \"🦊 Fox\", disabled: true }];\n```\n\n### formatGroupLabel\n\n`formatGroupLabel` allows you to use a custom rendering template for each subgroup title \u003cbr /\u003e\n\n```jsx\nimport { useState } from \"react\";\nimport Select from \"react-tailwindcss-select\";\n\nconst options = [\n    {\n        label: \"Mammal\",\n        options: [\n            { value: \"Dolphin\", label: \"🐬 Dolphin\" },\n            { value: \"Giraffe\", label: \"🦒 Giraffe\" }\n        ]\n    },\n    {\n        label: \"Carnivore\",\n        options: [\n            { value: \"Tiger\", label: \"🐅 Tiger\" },\n            { value: \"Lion\", label: \"🦁 Lion\" }\n        ]\n    }\n];\n\nconst App = () =\u003e {\n    const [animal, setAnimal] = useState(null);\n\n    const handleChange = value =\u003e {\n        console.log(\"value:\", value);\n        setAnimal(value);\n    };\n\n    return (\n        \u003cSelect\n            value={animal}\n            onChange={handleChange}\n            options={options}\n            isMultiple={true}\n            formatGroupLabel={data =\u003e (\n                \u003cdiv className={`py-2 text-xs flex items-center justify-between`}\u003e\n                    // 👉 data represents each subgroup\n                    \u003cspan className=\"font-bold\"\u003e{data.label}\u003c/span\u003e\n                    \u003cspan className=\"bg-gray-200 h-5 h-5 p-1.5 flex items-center justify-center rounded-full\"\u003e\n                        {data.options.length}\n                    \u003c/span\u003e\n                \u003c/div\u003e\n            )}\n        /\u003e\n    );\n};\n\nexport default App;\n```\n\n\u003e **Info**\n\u003e\n\u003e 👉 data represents each subgroup.\n\n### formatOptionLabel\n\n`formatOptionLabel` allows you to use a custom rendering template for each option in the list.\n\u003cbr /\u003e\n\n```jsx\nimport { useState } from \"react\";\nimport Select from \"react-tailwindcss-select\";\n\nconst options = [\n    { value: \"fox\", label: \"🦊 Fox\" },\n    { value: \"Butterfly\", label: \"🦋 Butterfly\" },\n    { value: \"Honeybee\", label: \"🐝 Honeybee\" }\n];\n\nconst App = () =\u003e {\n    const [animal, setAnimal] = useState(null);\n\n    const handleChange = value =\u003e {\n        console.log(\"value:\", value);\n        setAnimal(value);\n    };\n\n    return (\n        \u003cSelect\n            value={animal}\n            onChange={handleChange}\n            options={options}\n            formatOptionLabel={data =\u003e (\n                \u003cli\n                    className={`block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded ${\n                        !data.isSelected\n                            ? `text-white bg-blue-500`\n                            : `bg-blue-100 text-blue-500`\n                    }`}\n                \u003e\n                    // data represents each option in the list\n                    {data.label}\n                \u003c/li\u003e\n            )}\n        /\u003e\n    );\n};\n\nexport default App;\n```\n\n\u003e **Info**\n\u003e\n\u003e 👉 data represents each option in the list.\n\n### classNames\n\nAs of version 1.6.0 of `react-tailwindcss-select` you can now use the `classNames` prop for styling.\n\n\u003e **Info**\n\u003e\n\u003e 👉 Note: this is not to be confused with the className prop, which will add a class to the component.\n\n`classNames` takes an object with keys to represent the various inner components that `react-tailwindcss-select` is made up of.\n\nEach key takes a callback function or a string. If a key is not filled in, the default classes of the component will be used.\n\n#### All keys\n\n```typescript\ninterface SelectProps {\n    // ....\n    classNames?: {\n        menuButton?: (value?: { isDisabled?: boolean }) =\u003e string;\n        menu?: string;\n        tagItem?: (value?: { item?: Option, isDisabled?: boolean }) =\u003e string;\n        tagItemText?: string;\n        tagItemIconContainer?: string;\n        tagItemIcon?: string;\n        list?: string;\n        listGroupLabel?: string;\n        listItem?: (value?: { isSelected?: boolean }) =\u003e string;\n        listDisabledItem?: string;\n        ChevronIcon?: (value?: { open?: boolean }) =\u003e string;\n        searchContainer?: string;\n        searchBox?: string;\n        searchIcon?: string;\n        closeIcon?: string;\n    };\n    // ...\n}\n```\n\n#### Example of a custom style\n\n```javascript\nimport { useState } from \"react\";\nimport Select from \"react-tailwindcss-select\";\n\nconst options = [\n    { value: \"fox\", label: \"🦊 Fox\" },\n    { value: \"Butterfly\", label: \"🦋 Butterfly\" },\n    { value: \"Honeybee\", label: \"🐝 Honeybee\" }\n];\n\nconst App = () =\u003e {\n    const[animal, setAnimal] =useState(null);\n\n    const handleChange = value =\u003e {\n        console.log(\"value:\", value);\n        setAnimal(value);\n    };\n\n    return(\n        \u003cSelect\n            value={animal}\n            onChange={handleChange}\n            options={options}\n            classNames={{\n                menuButton: ({ isDisabled }) =\u003e (\n                    `flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none ${\n                        isDisabled\n                            ? \"bg-gray-200\"\n                            : \"bg-white hover:border-gray-400 focus:border-blue-500 focus:ring focus:ring-blue-500/20\"\n                    }`\n                ),\n                menu: \"absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700\",\n                listItem: ({ isSelected }) =\u003e (\n                    `block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded ${\n                        isSelected\n                            ? `text-white bg-blue-500`\n                            : `text-gray-500 hover:bg-blue-100 hover:text-blue-500`\n                    }`\n                )\n            }}\n        /\u003e\n    );\n};\n\nexport default App;\n```\n\n## PlayGround\n\nClone the `master` branch and run commands:\n\n```sh\n# Using npm\nnpm install \u0026\u0026 npm dev\n\n# Using yarn\nyarn install \u0026\u0026 yarn dev\n\n```\n\nOpen a browser and navigate to `http://localhost:8888`\n\n## Contributing\n\nGot ideas on how to make this better? Open an issue!\n\nDon't forget to see [CONTRIBUTING.md](https://github.com/onesine/react-tailwindcss-select/blob/master/CONTRIBUTING.md)\n\n## Thanks\n\nThis component is inspired by the excellent [react-select](https://react-select.com/) library by Jed\nWatson.\n\nI thank you in advance for your contribution to this project.\n\n## License\n\nMIT Licensed. Copyright (c) Lewhe Onesine 2022.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonesine%2Freact-tailwindcss-select","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fonesine%2Freact-tailwindcss-select","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fonesine%2Freact-tailwindcss-select/lists"}