Select (Dropdown) 🔽☑️

Well hello there, Choice Champion! 🏆

The select module is your ultimate tool for creating highly accessible and customizable dropdown select menus. It allows users to choose an option from a list, just like a native <select> element, but with superpowers! 🦸‍♂️

It's like a magic hat 🎩 – you ask for choices, and it presents them beautifully!

Awesome Features:

• 💯 Super Accessible: Full keyboard navigation, ARIA attributes, and screen reader support.
• 🎨 Fully Styleable: Customize every part to match your design system.
• 🧩 Composable API:
  • Select.Root: The main wrapper.
  • Select.Trigger: The button that opens the dropdown.
  • Select.Value: Displays the selected value (can have a placeholder).
  • Select.Icon: A little dropdown arrow icon.
  • Select.Portal: To render the dropdown content in a different part of the DOM.
  • Select.Content: The container for the list of items.
  • Select.Viewport: The scrollable area within the content.
  • Select.Item: A selectable option.
  • Select.ItemText: The text content of an item.
  • Select.ItemIndicator: A checkmark or other indicator for the selected item.
  • Select.Group & Select.Label: For organizing items.
  • Select.Separator: A visual divider.
• ⌨️ Type-ahead: Users can type to quickly find options.

Quick Pick Example:

import * as Select from '@ryvora/react-select';

function MyFruitSelector() {
  return (
    <Select.Root defaultValue="apple">
      <Select.Trigger aria-label="Fruit">
        <Select.Value placeholder="Select a fruit..." />
        <Select.Icon />
      </Select.Trigger>

      <Select.Portal>
        <Select.Content>
          <Select.Viewport>
            <Select.Item value="apple">
              <Select.ItemText>Apple 🍎</Select.ItemText>
              <Select.ItemIndicator />
            </Select.Item>
            <Select.Item value="banana">
              <Select.ItemText>Banana 🍌</Select.ItemText>
              <Select.ItemIndicator />
            </Select.Item>
            <Select.Item value="orange" disabled>
              <Select.ItemText>Orange 🍊 (Sold Out!)</Select.ItemText>
              <Select.ItemIndicator />
            </Select.Item>
          </Select.Viewport>
        </Select.Content>
      </Select.Portal>
    </Select.Root>
  );
}

Help your users make the perfect choice, every time! ✨👌