A compact dropdown for choosing one option from a short list.
center |
How the options line up with the button along that side. |
defaultOpen | boolean | false | Whether the options start open, when |
defaultValue | string|null | – | The |
disabled | boolean | false | Whether the picker ignores input. |
icon | ReactNode | – | Replaces this icon. Accepts any node; |
name | string | – | The form field name. The selected option's |
onChange | ((value: string) => void) | – | Called with the option's |
onOpenChange | ((open: boolean) => void) | – | Called when the options open or close. |
open | boolean | – | Whether the options are open. Use with |
placeholder | ReactNode | – | Shown on the button when no option is selected, or the value matches none of them. |
popupClassName | string | – | Classes for the popup that lists the options. |
side | "top"|"bottom"|"left"|"right"|"inline-end"|"inline-start" | top | The side of the button the options open on. |
sideOffset | number | 6 | The gap between the button and the options, in pixels. |
triggerClassName | string | – | Classes for the button that shows the selected option. |
value | string|null | – | The |
