PDS proposals
← All proposals

Select

An extension of the PDS Select: one new prop, variant, with bare next to default.

Extends a PDS componentOpen in Storybook

proposals/Select/decisions.md50 lines · View on GitHub

Decisions: Select

Replaces the Model Selector proposal (2026-10-19)

  • Decision: the ModelSelector proposal is retired. The model picker in the Chat Input is Select with variant='bare'.
  • Why: the designer's call: a model picker is a Select without the container. A Select is a listbox (the right semantics for choosing one value); Model Selector was built on a menu button. The Select already has options with icons, disabled options, a selected check, typeahead and a hidden label.
  • Port impact: the engineer adds variant: 'default' | 'bare' to the real Select and the pds-select--bare rules in select.css. ModelSelector is not ported; its handoff, Figma page record and story were removed (a copy is outside the repo for this session only).

A wrapper around the published Select, not a copy (2026-10-19)

  • Decision: Select.tsx wraps the package Select. The one prop variant adds the class pds-select--bare (and hides the label); all the bare look is CSS in select.css.
  • Why: a copy of the Select needs local copies of six helpers the package does not export (InputLabel, InputMessage, InputPrefix, SelectOption, DropdownSelectedIcon, useOverlayZIndex) and the input styles, about 600 lines, for a change that is only CSS plus a class. The wrapper keeps the real Select's behavior and accessibility. This differs from "a local copy" as first proposed; the result for the engineer is the same.
  • Port impact: none beyond the prop and the CSS above.

Option descriptions: not added (2026-10-19)

  • Decision: options stay { label, value, icon?, disabled? }, as in the PDS Select. Model Selector's per-option description (a line under the name in the menu) is not carried over.
  • Why: the designer asked for one new prop, and the Chat Input and the recipe show model names only. Descriptions were an open question in the old proposal and were never confirmed.
  • Port impact: if models need a description line, add an optional description to SelectOptionType as a second addition.

Sizes: the Select's own s and m (2026-10-19)

  • Decision: bare uses the Select sizes, s (default) and m. Model Selector's xs is not carried over.
  • Why: the Select has no xs. In the compact chat bar the model name is now 14px (it was 12px at xs). If that is too large next to the other controls, an xs size is a second addition.
  • Port impact: none.

The bare look (2026-10-19)

  • Decision: border-color and background-color are cleared on the trigger wrapper, which keeps the Select's height and its focus ring. Text is --pds-color-foreground-default-secondary at rest and --pds-color-foreground-default on hover and while open; the chevron follows. Inline padding is --pds-spacing-2xs. The label is hidden and the trigger hugs the selected value (the gap between the value and the chevron is --pds-spacing-2xs); the list is as wide as its longest option.
  • Why: the same behavior as the Model Selector's trigger had (state shown in color, not fill), now on the Select.
  • Port impact: none.

Stories show only what is proposed (2026-10-19)

  • Decision: the stories are Bare (with controls) and All Sizes And States (bare only). There are no stories for the default variant or for the bare Select in a toolbar.
  • Why: the designer asked: the default variant is the existing PDS Select, so the proposal only shows its addition. (The Chat Input and the recipe show the bare Select in a toolbar.)
  • Port impact: none.

The trigger hugs the value; the list fits its longest option (2026-10-19)

  • Decision: the bare trigger is width: fit-content around the selected value and the chevron, with --pds-spacing-2xs between them. It first used the Select's autoWidth, which sizes to the longest option, so "Zappy" had the room of "Claude Sonnet 5.5"; the designer said there was too much space. The list is min-width: max-content so long options are not squeezed to the trigger's width.
  • Why: the Select gives its list the trigger's width, and a hugging trigger is narrow. The list is rendered in a portal outside the bare Select, so the CSS finds it through the open bare trigger with :has() on the body (a workaround for the proposal; the real Select would put a class on the list).
  • Port impact: the engineer puts a bare-variant class on the list instead of the :has() rule. :has() needs a current browser (Chrome 105, Safari 15.4, Firefox 121).

Open questions

  • Names: variant='bare' or another word (inline, ghost)? PDS has no precedent for a borderless field.
  • Do option descriptions or an xs size matter for the models list? See the entries above.
  • The Select's validation, message and prefix props still exist on the bare variant but have no place in a toolbar; leave them or ignore them in the bare look?