Dropdown

Reveals options in a collapsible panel. Works as a form select (role=input) or as an action menu (role=action).

Preview

Code

Inspect

⌥-click (Option/Alt) nested elements to edit their props

width

menuWidth

label

placeholder

startIconName

helperText

defaultValue

defaultOpen

required

error

readOnly

disabled

aria-label

demoItemIcons

Prop	Type	Description
`role`	`"input" \| "action"`	input = form select; action = button menu
`size`	`"large" \| "medium" \| "small" \| "extraSmall"`	Control height. Default medium (40).
`menuType`	`"default" \| "checklist"`	default = single-select; checklist = multi-select (input-only)
`options`	`DropdownOption[]`	Items, separators, and group headers.
`label`	`ReactNode`	Field label above the control.
`required`	`boolean`	Input-role only. Appends * after the Field Wrapper label.
`disabled`	`boolean`	Disables interaction.
`menuPlacement`	`"bottomLeft" \| "bottomRight" \| "topLeft" \| "topRight"`	Preferred side for the menu panel.
`width`	`string`	Input-role only. "hug", "full", or a CSS length.
`menuWidth`	"hug" \| "trigger" \| number \| `${number}%`	Menu sizing: content hug, trigger width, px minimum, or exact trigger-relative percentage.

Prop	Type	Description
`label`	`string`	Text shown in the menu row.
`value`	`string`	Unique option value.
`disabled`	`boolean`	Disables this option.
`iconName`	`FaIconName`	Leading FA icon. Omit for text-only.