@atom-design-mog/menu

A powerful, fully customizable Menu / Filter / Selection Component for React Native. Supports multiple modes: Search + Radio, Search + Checkbox, Search + Checkbox + Chips, and Input fields with footer CTA buttons. Part of the Atom Design System.

📦 Installation

Install with npm:

npm install @atom-design-mog/menu

Or with yarn:

yarn add @atom-design-mog/menu

🚀 Import

import Menu from '@atom-design-mog/menu';

🎉 Supported Types (Modes)

• searchRadio — Searchable list with radio selection
• searchCheckbox — Searchable list with checkbox selection + “Check All”
• searchChipsCheckbox — Searchable list, checkbox selection with chips above the list
• inputFooter — Two input fields with footer CTA buttons (Okay / Cancel)

⭐ Features

• 🔍 Built-in search
• 🎯 Radio selection
• ☑️ Checkbox & multi-select with Check All and indeterminate states
• 🏷 Dynamic chips (add / remove) in chips mode
• 🔢 Input fields with footer actions (Apply / Cancel)
• 📱 Native modal — perfect for Android & iOS
• 🎨 Fully customizable styles
• ✨ No external runtime dependencies

🧩 Props

| Prop | Type | Required | Description | | ---------------- | -------- | -------- | --------------------------------------------------------------------------------- | | label | string | No | Label shown above the trigger | | triggerText | string | Yes | Text displayed on menu trigger | | type | string | Yes | Menu mode (searchRadio, searchCheckbox, searchChipsCheckbox, inputFooter) | | options | Array | No | List of { label, value } options | | chips | Array | No | Used only in searchChipsCheckbox | | onSelect | function | No | Returns selected value(s) | | onAddChip | function | No | Callback when new chip is added | | onRemoveChip | function | No | Called when user removes chip | | onApply | function | No | Used in inputFooter mode to return inputs | | onCancel | function | No | Called when cancel pressed |

📘 Basic Examples

Search + Radio

<Menu
  label="Choose Fruit"
  triggerText={value || 'Search & Select'}
  type="searchRadio"
  options={[{ label: 'Apple', value: 'Apple' }, { label: 'Orange', value: 'Orange' }]}
  onSelect={setValue}
/>

Search + Checkbox

<Menu
  label="Multi-Select"
  triggerText="Pick Items"
  type="searchCheckbox"
  options={options}
  onSelect={(values) => console.log(values)}
/>

Search + Chips Checkbox

<Menu
  label="Tags"
  triggerText="Search + Chips"
  type="searchChipsCheckbox"
  chips={chips}
  options={options}
  onSelect={setSelected}
  onAddChip={(chip) => setChips([...chips, chip])}
  onRemoveChip={(chip) => setChips(chips.filter(c => c !== chip))}
/>

Input + Footer Buttons

<Menu
  label="Quantity Range"
  triggerText="Enter Range"
  type="inputFooter"
  onApply={(data) => console.log('Applied:', data)}
  onCancel={() => console.log('Cancelled')}
/>

🧪 Full Test Screen (Recommended)

import React, { useState } from 'react';
import { View, Text, ScrollView } from 'react-native';
import Menu from '@atom-design-mog/menu';

export default function TestMenusScreen() {
  const [radioValue, setRadioValue] = useState('');
  const [checkboxValue, setCheckboxValue] = useState([]);
  const [chipsCheckboxValue, setChipsCheckboxValue] = useState([]);
  const [chips, setChips] = useState(['Chip 1', 'Chip 2']);
  const [inputValues, setInputValues] = useState({});

  const options = [
    { label: 'Option 1 - Apple', value: 'Apple' },
    { label: 'Option 2 - Banana', value: 'Banana' },
    { label: 'Option 3 - Cherry', value: 'Cherry' },
    { label: 'Option 4 - Orange', value: 'Orange' },
  ];

  const handleAddChip = chip => {
    if (chip && !chips.includes(chip)) setChips([...chips, chip]);
  };

  const handleRemoveChip = chip => setChips(chips.filter(c => c !== chip));

  return (
    <ScrollView style={{ flex: 1 }}>
      <View style={{ padding: 20, gap: 24 }}>
        <Text>Menu Search + Radio</Text>
        <Menu label="Label" triggerText={radioValue || 'Search with radio'} type="searchRadio" options={options} onSelect={setRadioValue} />

        <Text>Menu Search + Checkbox</Text>
        <Menu label="Label" triggerText={checkboxValue.length > 0 ? `Selected: ${checkboxValue.length}` : 'Search with checkbox'} type="searchCheckbox" options={options} onSelect={setCheckboxValue} />

        <Text>Menu Search + Chips Checkbox</Text>
        <Menu label="Label" triggerText="Search + Chips" type="searchChipsCheckbox" options={options} chips={chips} onSelect={setChipsCheckboxValue} onAddChip={handleAddChip} onRemoveChip={handleRemoveChip} />

        <Text>Menu with Input & Footer Buttons</Text>
        <Menu label="Quantity Input" triggerText="Open Menu" type="inputFooter" onApply={(data) => setInputValues(data)} onCancel={() => console.log('Cancelled')} />
      </View>
    </ScrollView>
  );
}

👤 Author

Avi Gupta