{"library":"rc-select","title":"React Headless Select Component","description":"rc-select is a foundational, unstyled React component designed for building highly customizable select input fields. It provides a robust set of core functionalities, including single and multiple selection modes, search capabilities, and comprehensive dropdown management, without dictating any specific UI or styling framework. The current stable version, as per npm metadata, is 14.16.8, though associated projects under `@rc-component/select` show frequent patch releases, indicating active development and maintenance primarily focused on bug fixes and stability. This library serves as a powerful primitive, famously underpinning the `Select` component within major UI libraries like Ant Design. Its key differentiator is its headless architecture, granting developers complete control over the rendering of internal elements and visual presentation, making it an excellent choice for applications requiring highly custom designs and strict adherence to accessibility standards.","language":"javascript","status":"active","last_verified":"Tue Apr 21","install":{"commands":["npm install rc-select"],"cli":null},"imports":["import Select from 'rc-select';","import { Option } from 'rc-select';","import 'rc-select/assets/index.css';","import type { SelectProps, OptionProps } from 'rc-select';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from 'react';\nimport Select, { Option } from 'rc-select';\nimport 'rc-select/assets/index.css';\n\nconst MySelectComponent = () => {\n  const [value, setValue] = useState('lucy');\n\n  const handleChange = (newValue) => {\n    console.log(`Selected: ${newValue}`);\n    setValue(newValue);\n  };\n\n  return (\n    <div style={{ width: 200, margin: '20px auto' }}>\n      <h3>Basic Select</h3>\n      <Select\n        value={value}\n        onChange={handleChange}\n        placeholder=\"Please select...\"\n        style={{ width: '100%' }}\n      >\n        <Option value=\"jack\">Jack</Option>\n        <Option value=\"lucy\">Lucy</Option>\n        <Option value=\"yiminghe\">Yiminghe</Option>\n        <Option value=\"disabled\" disabled>Disabled Option</Option>\n      </Select>\n      <h3 style={{ marginTop: '20px' }}>Multiple Select</h3>\n      <Select\n        mode=\"multiple\"\n        defaultValue={['a10', 'c12']}\n        placeholder=\"Select multiple...\"\n        style={{ width: '100%' }}\n        onChange={(values) => console.log('Multiple selected:', values)}\n      >\n        <Option value=\"a10\">a10</Option>\n        <Option value=\"c12\">c12</Option>\n        <Option value=\"b11\">b11</Option>\n      </Select>\n    </div>\n  );\n};\n\nexport default MySelectComponent;","lang":"typescript","description":"Demonstrates basic usage of the Select component with single and multiple selection, including controlled and uncontrolled examples, and necessary CSS import.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}