shadcn.io is not affiliated with official shadcn/ui
Dropdown Menu examples · Settings
Preferences Dropdown Dropdown Menu for React
An editor preferences menu of five checkbox rows, from auto-save and spell check to the minimap.
Writers and developers tweak the same editor settings over and over. This dropdown menu opens from a Preferences button and lists Auto-save, Spell Check, Line Numbers, Word Wrap and Minimap as checkbox rows under an Editor Preferences label. It fits code editors, writing apps and note tools.
Preview
Installation
FAQ
Which preferences start on?
Auto-save, Spell Check and Word Wrap start checked; Line Numbers and Minimap start off.
Each DropdownMenuCheckboxItem takes checked and onCheckedChange, which receives a boolean.
What is Editor Preferences?
The DropdownMenuLabel that names the group, followed by a separator. It isn't a row you can pick.
What does the trigger look like?
An outline Button with a gear icon before the word Preferences. The menu is w-56.
Do these ticks survive closing the menu?
Yes. The checked state lives in the component, not in the menu, so it's the same when the menu reopens. Save it to the user's settings to keep it across reloads.
Related
- Notification Settings Dropdown MenuA notifications menu with two groups of
- Profile with Preferences Dropdown MenuA profile menu with Profile and Settings
- View Options Dropdown MenuA view options menu with one layout to
- Dropdown with Checkboxes Dropdown MenuA View menu of checkbox rows that show or
- Default SwitchA switch in its default off state, with
- Simple CheckboxA checkbox with a label for a single