Skip to main content

SimpleSelect

Status: Content below is sourced from the Naos Figma documentation page for Simple Select (file nfTKjsYTKM2qvIo8KXDAXV, node 5001:825351, "🧩 Naos – Forms and inputs", checked 2026-08-19) plus the component's TypeScript source. This Figma page has no written description or usage-rules text at all (same pattern as Timepicker and PhoneInput in this file) — only anatomy, trigger variants, item states, and menu-content variants are shown visually. Nothing below is invented — qualitative usage guidance is left as an explicit TODO.

Source: DTSL/design-system → packages/product/@dtsl-react/src/components/molecular/SimpleSelect/ (package @dtsl/react, exported as SimpleSelectMenu, SimpleSelectOption)

Its index.ts re-exports (verbatim):

export { SimpleSelectMenu } from './SimpleSelectMenu'
export { SimpleSelectOption } from './SimpleSelectOption'
export type { SimpleSelectMenuProps } from './SimpleSelectMenu'
export type { SimpleSelectOptionProps } from './SimpleSelectOption'
export type { OptionType, SelectState, RefType } from './utils/propTypes'
export { default as useSelect } from './hooks/useSelect'
export type { UseSelectProps, UseSelectReturn } from './hooks/useSelect'

Full SimpleSelectMenuProps/SimpleSelectOptionProps shapes not extracted here — see source directly.

Anatomy​

Form field composition (when used as a labeled field):

  1. Label (+ optional required asterisk)
  2. Help text
  3. Trigger (the field itself, with a chevron that flips up when open)
  4. Dropdown menu (list of options, opens below the trigger)

Trigger variants — a real, non-obvious finding: the Figma page shows two distinct trigger presentations:

  • A bordered input-style field, paired with the label/help-text/asterisk composition above
  • A compact NaosButton-style trigger (pill button with a chevron), shown in two states: an unselected placeholder ("Simple SelectMenu ⌄") and a selected-value display ("Option A ⌄")

Confirm with design whether both are meant to be equally valid entry points, or whether one is the primary pattern.

List item anatomy: each option = an optional leading icon (explicitly labeled "Icon is optional" on the anatomy diagram, shown with a flag icon example) + label text.

Menu content variants: a plain option list, and a variant with a Search input pinned above the list (search icon + placeholder text).

Item interaction states​

8 real states documented for .SelectMenuListItem: Default, Hover, Pressed, Focus, Selected, Selected + Hover, Selected + Pressed, Selected + Focus.

When to Use​

TODO — not covered on this Figma page. Needs design/PM input. (See also the open SimpleSelect-vs-SelectMenu-vs-CheckboxDropdown decision noted in this component's earlier scaffold — SelectMenu's own Figma page hasn't been reviewed yet.)

When NOT to Use​

TODO — not covered on this Figma page.

Decision Logic​

Need the trigger to look like a labeled form field (label/help text/asterisk)?
  YES → use the bordered input-style trigger
  NO, need a compact inline trigger instead → use the NaosButton-style trigger

Need users to filter a long option list?
  YES → use the Search variant of the menu
  NO  → use the plain option list

Accessibility​

TODO — not covered on this Figma page. Needs UX/product input.

Common Mistakes​

TODO — not covered on this Figma page. Needs UX/product input.