{"id":24873757,"url":"https://github.com/uduma-sonia/react-select-several","last_synced_at":"2026-04-09T08:09:10.132Z","repository":{"id":61291885,"uuid":"550281115","full_name":"uduma-sonia/react-select-several","owner":"uduma-sonia","description":"Customizable select and input field for React that enables users to select and input multiple options","archived":false,"fork":false,"pushed_at":"2022-10-17T14:37:25.000Z","size":182,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-11T00:44:08.720Z","etag":null,"topics":["input","react","react-dropdown","react-multiselect","react-select","select"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-select-several","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/uduma-sonia.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-10-12T13:49:43.000Z","updated_at":"2022-10-12T21:40:48.000Z","dependencies_parsed_at":"2023-01-20T02:30:28.160Z","dependency_job_id":null,"html_url":"https://github.com/uduma-sonia/react-select-several","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/uduma-sonia/react-select-several","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uduma-sonia%2Freact-select-several","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uduma-sonia%2Freact-select-several/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uduma-sonia%2Freact-select-several/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uduma-sonia%2Freact-select-several/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uduma-sonia","download_url":"https://codeload.github.com/uduma-sonia/react-select-several/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uduma-sonia%2Freact-select-several/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267133875,"owners_count":24040786,"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","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["input","react","react-dropdown","react-multiselect","react-select","select"],"created_at":"2025-02-01T06:17:23.471Z","updated_at":"2026-04-09T08:09:10.089Z","avatar_url":"https://github.com/uduma-sonia.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-select-several\n\n\u003cdiv align=\"center\"\u003e\n  \u003cbr /\u003e\n  \u003cbr /\u003e\n  \u003ch3 align=\"center\"\u003eCustomizable select and input field for React that enables users to select and input multiple options\u003c/h3\u003e\n\n  \u003cp align=\"center\"\u003e\n  \u003ca href=\"https://npm.im/react-select-several\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-select-several.svg?color=brightgreen\u0026style=flat-square\" alt=\"Package version.\"\u003e\u003c/a\u003e\n  \u003ca href=\"http://makeapullrequest.com\"\u003e\u003cimg src=\"https://img.shields.io/badge/PR(s)-welcome-brightgreen.svg?style=flat-square\" alt=\"Make a pull request.\"\u003e\u003c/a\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n## ⚡️ Features\n\n- 100% responsive\n- 100% customizable\n- Supports any css unit\n- No third party dependency\n- TypeScript ready\n- Multi select option\n- Multi input option\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## Installation\n\n```\n$ npm i react-select-several\n\n```\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## Examples\n\n[codesandbox](https://codesandbox.io/s/react-select-several-517mpe?file=/src/App.js)\n\n## Basic Usage\n\nFor select field\n\n```jsx\n//Import react-select-several component\nimport { SelectMultiple } from 'react-select-several'\n\nexport const App = () =\u003e {\n  const onChange = (values: string[]) =\u003e {\n    console.log(values)\n  }\n\n  return (\n    \u003c\u003e\n      \u003cSelectMultiple onChange={onChange}\u003e\n        \u003coption\u003eHTML\u003c/option\u003e\n        \u003coption\u003eCSS\u003c/option\u003e\n        \u003coption\u003eJavaScript\u003c/option\u003e\n      \u003c/SelectMultiple\u003e\n    \u003c/\u003e\n  )\n}\n```\n\nFor input field\n\n```jsx\n//Import react-select-several component\nimport { InputMultiple } from 'react-select-several'\n\nexport const App = () =\u003e {\n  const onChange = (values: string[]) =\u003e {\n    console.log(values)\n  }\n\n  return (\n    \u003c\u003e\n      \u003cInputMultiple onChange={onChange} /\u003e\n    \u003c/\u003e\n  )\n}\n```\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n## Props\n\nReact-select-several has two main components, a select field and input field. It is majorly used to select or input multiple options. Here is a table of the available props that can be passed down.\n\n### General props\n\n| Props              | Description                                                                    | Type                      | Default |\n| ------------------ | ------------------------------------------------------------------------------ | ------------------------- | ------- |\n| name               | Set the name of the input or select field                                      | _`string`_                |\n| id                 | Set the name of the input or select field                                      | _`string`_                |\n| onChange           | Function to get the values                                                     | _`(e: string[]) =\u003e void`_ |\n| maxNumber          | Sets the maximum number for input or selection                                 | _`number`_                |\n| tagIcon            | Custom Icon for the tag deletion, (react-icons can be used)                    | _`React.ReactElement`_    |\n| placeholder        | Sets the placeholder for the input or select field                             | _`string`_                |\n| required           | Props to ensure the field is required                                          | _`boolean`_               | false   |\n| disable            | Props for disabling the field                                                  | _`boolean`_               | false   |\n| autoFocus          | Props that lets you specify if the field should have focus when the page loads | _`boolean`_               | false   |\n| autoComplete       | Props providing a hint for a user agent's autocomplete feature                 | _`string`_                |\n| tagContainerClass  | Custom classname for the parent container of all tags                          | _`string`_                |\n| tagBackgroundColor | Custom background color for tags                                               | _`string`_                |\n| tagTextColor       | Custom color for tag text                                                      | _`string`_                |\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n### Select props\n\n| Props              | Description                            | Type       |\n| ------------------ | -------------------------------------- | ---------- |\n| children           | A list of options for the select field |\n| selectTagClass     | Custom class for tags                  | _`string`_ |\n| selectTagTextClass | Custom class for tags texts            | _`string`_ |\n| selectTagIconClass | Custom class for tags icons            | _`string`_ |\n| selectClass        | Custom class for select field          | _`string`_ |\n\n\u003cbr/\u003e\n\u003cbr/\u003e\n\n### Input props\n\n| Props             | Description                  | Type       |\n| ----------------- | ---------------------------- | ---------- |\n| inputTagClass     | Custom class for tags        | _`string`_ |\n| inputTagTextClass | Custom class for tags texts  | _`string`_ |\n| inputTagIconClass | Custom class for tags icons  | _`string`_ |\n| inputClass        | Custom class for input field | _`string`_ |\n\n## Contribution\n\nReact-select-several is an open-source project and contributions are welcome.\nGot ideas on how to make this better? Open an issue!\n\n\u003cbr /\u003e\n\u003cbr /\u003e\n\n## ⚖️ Licence\n\nMIT (c) [Sonia Uduma](https://sohnya.netlify.app/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuduma-sonia%2Freact-select-several","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuduma-sonia%2Freact-select-several","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuduma-sonia%2Freact-select-several/lists"}