MenuItem

A row of a list, in one of two roles:

An option of Select's listbox, rendered as a semantic <li role="option">. Inside a Select the selection, highlight, density, and accent props are injected automatically - you only supply value and the label. On its own it renders a styled, static row.
A menu row inside a MenuList: a menuitem (or menuitemradio / menuitemcheckbox) with a leading icon column, its label and a trailing shortcut, chosen by a click, Enter or Space.

import { Select } from '@soroush.tech/design-system/Select'
import { MenuItem } from '@soroush.tech/design-system/MenuItem'

;<Select placeholder="Pick a platform">
  <MenuItem value="web">Web</MenuItem>
  <MenuItem value="android">Android</MenuItem>
  <MenuItem value="ios">iOS</MenuItem>
</Select>

import { MenuList } from '@soroush.tech/design-system/Menu'
import { MenuItem } from '@soroush.tech/design-system/MenuItem'

;<MenuList aria-label="File" onSelect={run}>
  <MenuItem value="open" startIcon={<Icon name="folder" size="sm" />} shortcut="Control+O">
    Open...
  </MenuItem>
  <MenuItem value="share" disabled note="Coming later">
    Share...
  </MenuItem>
  <MenuItem value="wrap" role="menuitemcheckbox" selected={isWrapped}>
    Wrap lines
  </MenuItem>
</MenuList>

Examples

Default

<MenuItem value="web" color="primary" size="md">Web</MenuItem>

Menu Row

const args: Partial<MenuItemProps> = {
  role: 'menuitem',
  startIcon: 'edit_note',
  shortcut: 'F2',
  color: 'primary',
  size: 'md',
  children: 'Rename...',
}

<MenuList aria-label="File">
  <MenuItem>New file...</MenuItem>
  <MenuItem {...args} />
  <MenuItem disabled note="Nothing to undo">
    Undo
  </MenuItem>
</MenuList>

Selected

<MenuItem value="web" selected color="primary" size="md">Web</MenuItem>

States

Default
Highlighted
Selected
Disabled

<>
  <MenuItem value="a">Default</MenuItem>
  <MenuItem value="b" highlighted>
    Highlighted
  </MenuItem>
  <MenuItem value="c" selected>
    Selected
  </MenuItem>
  <MenuItem value="d" disabled>
    Disabled
  </MenuItem>
</>

Multiple With Checkmark

Selected
Unselected

<>
  <MenuItem value="a" multiple selected>
    Selected
  </MenuItem>
  <MenuItem value="b" multiple>
    Unselected
  </MenuItem>
</>

Dividers And Dense

Profile
Settings
Compact row
Another compact row

<>
  <MenuItem value="a" divider>
    Profile
  </MenuItem>
  <MenuItem value="b" divider>
    Settings
  </MenuItem>
  <MenuItem value="c" dense>
    Compact row
  </MenuItem>
  <MenuItem value="d" dense>
    Another compact row
  </MenuItem>
</>