DropdownMenuCheckboxItem

DropdownMenuCheckboxItem is part of the Overlays set, imported from @jcsoftdev/ui/overlays.

Import

import { DropdownMenuCheckboxItem } from "@jcsoftdev/ui/overlays";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/overlays/dropdown-menu.

Usage

export const Default: Story = {
  render: (args) => (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="secondary">Acciones de la cita</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent {...args}>
        <DropdownMenuLabel>Luis Ramírez · 11:30</DropdownMenuLabel>
        <DropdownMenuItem>Reprogramar</DropdownMenuItem>
        <DropdownMenuItem>Cobrar S/ 45</DropdownMenuItem>
        <DropdownMenuItem disabled>Enviar recordatorio</DropdownMenuItem>
        <DropdownMenuSeparator />
        <DropdownMenuItem className="text-danger">Anular cita</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  ),
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
checked	boolean | "indeterminate"
onCheckedChange	((checked: boolean) => void)
onSelect	((event: Event) => void)		Runs when the item is chosen. preventDefault() keeps the menu open.
asChild	boolean
disabled	boolean
textValue	string		Text used by typeahead. Defaults to the item’s text content.

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Open By Default
• Radio Filter
• Custom User Menu

Source

packages/ui/src/overlays/dropdown-menu/dropdown-menu.tsx