Seamless Cross-Platform Design Systems for B2B Solutions

Develop

Dropdown is typically used to display a set of options that appear when the user clicks or hovers over a trigger element. Users can select an option from the dropdown menu, which is commonly used for navigation or other scenarios where multiple options need to be provided.

Develop Design Accessibility

import {
  Dropdown,
  DropdownButton,
  DropdownGroup,
  DropdownRadioGroup,
  DropdownCheckboxGroup,
  DropdownItem,
} from "wis/dropdown"

API Reference#

Name	Type	Default	Description
defaultOpen	`boolean`	none	The open state of the dropdown menu when it is initially rendered.
open	`boolean`	none	The controlled open state of the dropdown menu. Must be used in conjunction with `onOpen`.
text	`string`	none	The text information displayed on the dropdown menu.
description	`string`	none	Describe the dropdown menu.
disabled	`boolean`	false	When `true`, prevents the user from interacting with the dropdown.
icon	`ReactNode`	none	The icon element will be displayed next to the dropdown menu text.
avatar	`Avatar`	none	The avatar element will be displayed next to the dropdown menu text.
arrowDirection	`down` `right`	down	The controlled dropdown menu arrow direction.
onOpen	`(open: boolean) => void`	none	Event handler called when the dropdown menu is open state change.

DropdownButton#

Name	Type	Default	Description
defaultOpen	`boolean`	none	The open state of the dropdown menu when it is initially rendered.
open	`boolean`	none	The controlled open state of the dropdown menu. Must be used in conjunction with `onOpen`.
text	`string`	none	The text information displayed on the dropdown menu.
variant	`primary` `classic` `secondary`	secondary	The visual variant to apply to dropdown button.
disabled	`boolean`	false	When `true`, prevents the user from interacting with the dropdown button.
icon	`ReactNode`	false	The icon element will be displayed next to the dropdown button text.
iconControl	`prefix` `suffix`	prefix	Controls the display position of the icon relative to the text.
size	`md` `sm` `xs`	md	The size of the dropdown button.
shortcutKey	`string`	none	Sets a global shortcut key, such as `Control+I`. When the user presses the combination key, the dropdown button click event will be triggered. View Keyboard
onOpen	`(open: boolean) => void`	none	Event handler called when the dropdown menu is open state change.

DropdownGroup#

Name	Type	Default	Description
title	`string`	none	The group title text will show at the beginning of the group.
onSelect	`(value: string) => void`	none	Event handler called when group item click.

DropdownRadioGroup#

Name	Type	Default	Description
name	`string`	none	The unique name of group.
title	`string`	none	The group title text will show at the beginning of the group.
value	`string`	none	The value of selected item in the group. Must be used in conjunction with `onChecked`.
defaultValue	`string`	none	The default value of selected item in the group.
onChange	`(value: string) => void`	none	Event handler called when group item click.

DropdownCheckboxGroup#

Name	Type	Default	Description
name	`string`	none	The unique name of group.
title	`string`	none	The group title text will show at the beginning of the group.
value	`string[]`	none	The value of selected item in the group. Must be used in conjunction with `onChange`.
defaultValue	`string[]`	none	The default value of selected item in the group.
onChange	`(value: string[]) => void`	none	Event handler called when group item click.

DropdownItem#

Name	Type	Default	Description
label	`string`	none	The text information displayed on the item.
value	`string`	none	The unique value of the item.
status	`danger`	none	Sets the special status of the item.
disabled	`boolean`	false	When `true`, prevents the user from interacting with the dropdown item.
icon	`ReactNode`	none	The icon element will be displayed next to the dropdown item text.
shortcutKey	`string`	none	Sets a global shortcut key, such as `Control+I`. When the user presses the combination key, the dropdown item's click event will be triggered. View Keyboard
onClick	`(event: Event) => void`	none	Event handler called when the user select an item (via mouse or keyboard).

Dropdown#