@radix-ui/react-select

Basic Select

This code demonstrates how to create a basic select dropdown with predefined options for 'apple' and 'orange'. It showcases the use of `Select.Trigger` for the dropdown button, `Select.Value` for displaying the selected value, and `Select.Item` for the options.

{"import { Select } from '@radix-ui/react-select';\n\nfunction App() {\n  return (\n    <Select>\n      <Select.Trigger aria-label='Food'>\n        <Select.Value placeholder='Select a food...' />\n        <Select.Icon />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.ScrollUpButton />\n        <Select.Viewport>\n          <Select.Item value='apple'>\n            <Select.ItemText>Apple</Select.ItemText>\n          </Select.Item>\n          <Select.Item value='orange'>\n            <Select.ItemText>Orange</Select.ItemText>\n          </Select.Item>\n        </Select.Viewport>\n        <Select.ScrollDownButton />\n      </Select.Content>\n    </Select>\n  );\n}"}

Multiple Selection

This example extends the basic select by enabling multiple selections. Users can select more than one option from the dropdown. The `multiple` prop on the `Select` component enables this functionality.

{"import { Select } from '@radix-ui/react-select';\n\nfunction App() {\n  return (\n    <Select multiple>\n      <Select.Trigger aria-label='Fruits'>\n        <Select.Value placeholder='Select fruits...' />\n        <Select.Icon />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Viewport>\n          <Select.Item value='apple'>\n            <Select.ItemText>Apple</Select.ItemText>\n          </Select.Item>\n          <Select.Item value='orange'>\n            <Select.ItemText>Orange</Select.ItemText>\n          </Select.Item>\n        </Select.Viewport>\n      </Select.Content>\n    </Select>\n  );\n}"}

Searchable Select

This code snippet demonstrates how to implement a searchable select dropdown. It uses a state to track the search query and filters the options based on the user's input. The `onValueChange` prop is used to update the search query.

{"import { Select } from '@radix-ui/react-select';\nimport { useState } from 'react';\n\nfunction App() {\n  const [query, setQuery] = useState('');\n  const fruits = ['Apple', 'Orange', 'Banana', 'Mango'];\n  const filteredFruits = query === '' ? fruits : fruits.filter((fruit) => fruit.toLowerCase().includes(query.toLowerCase()));\n\n  return (\n    <Select onValueChange={(value) => setQuery(value)}>\n      <Select.Trigger aria-label='Fruits'>\n        <Select.Value placeholder='Type to search...' />\n        <Select.Icon />\n      </Select.Trigger>\n      <Select.Content>\n        <Select.Viewport>\n          {filteredFruits.map((fruit) => (\n            <Select.Item key={fruit} value={fruit.toLowerCase()}>\n              <Select.ItemText>{fruit}</Select.ItemText>\n            </Select.Item>\n          ))}\n        </Select.Viewport>\n      </Select.Content>\n    </Select>\n  );\n}"}