Radio Menu

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

<!-- Radio Menu -->
<div class="relative inline-block">
  <button
    id="radio-button"
    class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors"
    onclick="toggleDropdown('radio-menu')"
  >
    <span id="radio-label">Priority</span>
    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
    </svg>
  </button>

  <div
    id="radio-menu"
    class="hidden absolute left-0 z-20 mt-2 w-64 bg-white rounded-xl shadow-xl border border-gray-200 overflow-hidden"
  >
    <div class="px-4 py-3 border-b border-gray-100">
      <p class="text-xs font-semibold text-gray-500 uppercase tracking-wider">Select Priority</p>
    </div>

    <div class="py-2">
      <label class="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-blue-50 transition-colors">
        <input type="radio" name="priority" class="priority-radio w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" value="critical" onchange="updateRadioLabel(this)">
        <div class="flex items-center gap-2">
          <span class="w-2.5 h-2.5 bg-red-500 rounded-full"></span>
          <span class="text-sm font-medium text-gray-900">Critical</span>
        </div>
      </label>
      
      <label class="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-blue-50 transition-colors">
        <input type="radio" name="priority" class="priority-radio w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" value="high" onchange="updateRadioLabel(this)">
        <div class="flex items-center gap-2">
          <span class="w-2.5 h-2.5 bg-orange-500 rounded-full"></span>
          <span class="text-sm font-medium text-gray-900">High</span>
        </div>
      </label>
      
      <label class="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-blue-50 transition-colors">
        <input type="radio" name="priority" class="priority-radio w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" value="medium" onchange="updateRadioLabel(this)" checked>
        <div class="flex items-center gap-2">
          <span class="w-2.5 h-2.5 bg-amber-500 rounded-full"></span>
          <span class="text-sm font-medium text-gray-900">Medium</span>
        </div>
      </label>
      
      <label class="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-blue-50 transition-colors">
        <input type="radio" name="priority" class="priority-radio w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" value="low" onchange="updateRadioLabel(this)">
        <div class="flex items-center gap-2">
          <span class="w-2.5 h-2.5 bg-emerald-500 rounded-full"></span>
          <span class="text-sm font-medium text-gray-900">Low</span>
        </div>
      </label>
      
      <label class="flex items-center gap-3 px-4 py-3 cursor-pointer hover:bg-blue-50 transition-colors">
        <input type="radio" name="priority" class="priority-radio w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" value="none" onchange="updateRadioLabel(this)">
        <div class="flex items-center gap-2">
          <span class="w-2.5 h-2.5 bg-gray-300 rounded-full"></span>
          <span class="text-sm font-medium text-gray-900">None</span>
        </div>
      </label>
    </div>
  </div>
</div>

<script>
  function toggleDropdown(id) {
    document.getElementById(id).classList.toggle('hidden');
  }

  function updateRadioLabel(radio) {
    const value = radio.value;
    const labelMap = {
      'critical': 'Critical',
      'high': 'High',
      'medium': 'Medium',
      'low': 'Low',
      'none': 'None'
    };
    document.getElementById('radio-label').textContent = labelMap[value] || 'Priority';
  }

  document.addEventListener('click', function(event) {
    const container = document.querySelector('.relative.inline-block');
    if (!container.contains(event.target)) {
      document.getElementById('radio-menu').classList.add('hidden');
    }
  });
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

# Radio Menu

Single-select radio style menu.

## Preview

Open `preview.html` for a standalone demonstration.

## Features

- Single selection among options

## Usage

```bash
npx devsnips add Tailwind/Components/Dropdowns/radio-menu
```

Copy from `code.html`.

## Customization

- Selected indicator styles

## Accessibility

- Expose selected option accessibly

## Dependencies

- Tailwind CSS; JS as present

## File Structure

- `code.html` · `preview.html` · `metadata.json` · `README.md`