MenuItem

<ts-menu-item> vv0.6.3

The ts-menu-item component.

Open in Storybook for interactive demos.

Preview

<ts-menu-item variant="default">Content</ts-menu-item>

Property	Attribute	Type	Default	Description
`checked`	`checked`	`boolean`	`false`	Whether the checkbox/radio item is checked.
`disabled`	`disabled`	`boolean`	`false`	Disables the menu item.
`href`	`href`	`string \| undefined`	—	If provided, renders the item as a link.
`type`	`type`	`"checkbox" \| "default" \| "radio"`	`'default'`	The type of menu item.
`value`	`value`	`string`	`''`	The value associated with this menu item.
`variant`	`variant`	`"danger" \| "default"`	`'default'`	Visual variant of the menu item.

Event	Detail	Bubbles	Composed	Description
`tsSelect`	`\{ value: string; \}`	Yes	Yes	Emitted when the menu item is selected.

Method	Signature	Description
`setFocus`	`setFocus() => Promise<void>`	Focus the menu item.

Name	Description
`(default)`	Default slot for menu item label content.
`prefix`	Content before the label (e.g., icon).
`suffix`	Content after the label (e.g., shortcut or badge).

Use ::part() to style internal elements:

Part	Description
`base`	The menu item container element.
`label`	The label wrapper.
`prefix`	The prefix slot wrapper.
`suffix`	The suffix slot wrapper.

ts-menu-item::part(base) {
  /* your custom styles */
}

<ts-menu-item variant="default">Content</ts-menu-item>

import { TsMenuItem } from '@tessera-ui/react';

<TsMenuItem variant="default">Content</TsMenuItem>