MenuItem
A single option row for Select's listbox, rendered as a semantic
<li role="option">. On its own it renders a styled, static row; inside a Select the
selection, highlight, density, and accent props are injected automatically - you only supply
value and the label.
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>
Examples
Default
- Web
<MenuItem value="web" color="primary" size="md">Web</MenuItem>
Selected
- Web
<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>
</>