Select Menu

A dropdown that opens in place, pushing the content below it down instead of floating over it, which keeps it inside a scrolling screen. The chevron turns and the list grows open; choosing an option or pressing Escape on the web closes it. The trigger reports whether it is expanded. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add select-menu

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/select-menu.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { useState } from "react";
import { SelectMenu } from "@/components/ui/select-menu";

export default function Example() {
  const [country, setCountry] = useState("");

  return (
    <SelectMenu
      label="Country"
      value={country}
      onChange={setCountry}
      options={[
        { value: "ca", label: "Canada" },
        { value: "us", label: "United States" },
      ]}
    />
  );
}

Props