# Dropdown, Select, default

Use when there are 5+ options or space is limited. Ideal for selecting one item from a pre-defined list (e.g., Country, State).

import Anatomy from "../../../../../components/Anatomy.astro";
import VariantMatrix from "../../../../../components/VariantMatrix.astro";
import MotionPattern from "../../../../../components/MotionPattern.astro";
import AccessibilityRefs from "../../../../../components/AccessibilityRefs.astro";
import PageMetadata from "../../../../../components/PageMetadata.astro";
import StubFooter from "../../../../../components/StubFooter.astro";
import DoDont from "../../../../../components/DoDont.astro";
import Callout from "../../../../../components/Callout.astro";
import TermList from "../../../../../components/TermList.astro";
import ComponentTabs from "../../../../../components/ComponentTabs.astro";
import ConfidenceChip from "../../../../../components/ConfidenceChip.astro";
import MediaAsset from "../../../../../components/MediaAsset.astro";

<PageMetadata
  slug="components.dropdown-select-default.content"
  source="components/dist/registries/dskit.json#dropdown-select-default"
  schema={1}
  updated="2026-05-14"
/>

<ComponentTabs component={"dropdown-select-default"} activeTab={"content"} />

## Content guidelines

Dropdowns and select menus allow users to choose one option from a list. They are used for actions menus, filter selections, and single-choice inputs where the full list does not need to be visible at all times.

### Behavior

- Menu opens on click, not on hover.
- Close the menu on Escape key press or on outside click.

### Style

- Label the button with a clear action or noun. For example, **Actions** or **More**.
- Menu items should follow the verb + noun formula. For example, **Download PDF**, **Add tag**, **Delete record**.
- Use sentence case for all menu items.
- Multi-selection dropdowns: include checkboxes, and selections should persist until the user closes the menu.

### Do / Don't

<DoDont pairs={[{ do: "Actions", dont: "Click here" }, { do: "Download PDF", dont: "PDF download" }, { do: "Add tag", dont: "Tag adding" }]} />