# popover.picker

Choices that open from a button, one of which is picked: a sort order, a category. Picking one closes it

Component: [`<Popover>`](https://www.prongs.dev/docs/components/popover.md) · Renders: `<div popover>` · Profile: [UI](https://www.prongs.dev/docs/intents/ui.md)

## Example

```tsx
<Popover intent="popover.picker" label="What it holds" trigger={<Action intent="action.reveal">Open</Action>}>
  …
</Popover>
```

## Choosing between neighbours

Find the row that describes your element, and use the intent on the right.

| If it is for… | Use |
|---|---|
| Choices that open from a button, one of which is picked: a sort order, a category. Picking one closes it | `popover.picker` (this page) |
| Commands that do something | [`popover.menu`](https://www.prongs.dev/docs/intents/popover/menu.md) |
| A few options that fit on the page | [`choice.option`](https://www.prongs.dev/docs/intents/choice/option.md) |
| The button that opens it | [`choice.open`](https://www.prongs.dev/docs/intents/choice/open.md) |
| Choosing a value for a setting (rather than [`popover.menu`](https://www.prongs.dev/docs/intents/popover/menu.md)) | `popover.picker` (this page) |
| Exactly one choice (rather than [`popover.picker.many`](https://www.prongs.dev/docs/intents/popover/picker-many.md)) | `popover.picker` (this page) |

## Connections

Declared in the registry, both directions. Where an intent is used in your own code is something check and the gallery see; this site has no app code.

- Built from: [`surface.floating`](https://www.prongs.dev/docs/intents/ui.md#surface-floating), [`arrange.rows`](https://www.prongs.dev/docs/intents/ui.md#arrange-rows)
- Used to build: [`popover.picker.many`](https://www.prongs.dev/docs/intents/popover/picker-many.md)

## For registry authors

**Starter intents.** These are the intents `prongs add` puts in your registry, shown in this site’s theme. Yours are your own `registry.ts`: rename, restyle and add to them, and see them with `prongs add gallery`.

What this intent is built from and its entry in `components/prongs/registry.ts`. You only need this to change how it looks or to add an intent like it.

How popover.picker resolves, and its definition

Each layer adds to the one before it; a later class wins over an earlier one that sets the same thing.

- [`surface.floating`](https://www.prongs.dev/docs/intents/ui.md#surface-floating) — Floats next to the element that opened it, flipping to stay on screen. Hidden while closed, whatever display the intent sets

  ```
  surface-overlay m-1 inset-auto rounded-lg border
  border-surface-border shadow-lg
  [position-area:bottom_span-right]
  [position-try-fallbacks:flip-block,flip-inline] origin-top-left
  data-[align=end]:origin-top-right
  data-[align=end]:[position-area:bottom_span-left]
  transition-[opacity,scale,display,overlay] transition-discrete
  duration-150 ease-out [&:not(:popover-open)]:hidden
  [&:not(:popover-open)]:scale-95 [&:not(:popover-open)]:opacity-0
  starting:[&:popover-open]:scale-95
  starting:[&:popover-open]:opacity-0
  motion-reduce:transition-none
  ```

- [`arrange.rows`](https://www.prongs.dev/docs/intents/ui.md#arrange-rows) — Its buttons and links become full-width rows, whatever their own look, keeping a danger colour; a pressed or selected one is filled and ticked

  ```
  flex flex-col [&_:is(a,button)]:flex [&_:is(a,button)]:w-full
  [&_:is(a,button)]:items-center [&_:is(a,button)]:justify-start
  [&_:is(a,button)]:gap-2.5 [&_:is(a,button)]:text-left
  [&_:is(a,button)]:rounded-md [&_:is(a,button)]:border-0
  [&_:is(a,button)]:bg-transparent [&_:is(a,button)]:px-3
  [&_:is(a,button)]:py-1.5 [&_:is(a,button)]:font-normal
  [&_:is(a,button)]:text-[var(--row-fg,var(--foreground))]
  [&_:is(a,button)]:no-underline
  [&_:is(a,button):hover]:no-underline
  [&_:is(a,button):hover]:bg-surface-hover
  [&_:is(a,button):focus-visible]:bg-surface-hover
  [&_button[aria-pressed=true]]:bg-surface-active
  [&_button[aria-pressed=true]]:text-foreground
  [&_button[aria-pressed=true]]:after:ml-auto
  [&_button[aria-pressed=true]]:after:content-["✓"]
  [&_button[aria-selected=true]]:bg-surface-active
  [&_button[aria-selected=true]]:text-foreground
  [&_button[aria-selected=true]]:after:ml-auto
  [&_button[aria-selected=true]]:after:content-["✓"]
  ```

- `popover.picker` (this page) — Choices that open from a button, one of which is picked: a sort order, a category. Picking one closes it

  ```
  max-h-80 min-w-56 gap-0.5 overflow-y-auto p-1
  ```

Final classes

```
surface-overlay m-1 inset-auto rounded-lg border
border-surface-border shadow-lg
[position-area:bottom_span-right]
[position-try-fallbacks:flip-block,flip-inline] origin-top-left
data-[align=end]:origin-top-right
data-[align=end]:[position-area:bottom_span-left]
transition-[opacity,scale,display,overlay] transition-discrete
duration-150 ease-out [&:not(:popover-open)]:hidden
[&:not(:popover-open)]:scale-95 [&:not(:popover-open)]:opacity-0
starting:[&:popover-open]:scale-95
starting:[&:popover-open]:opacity-0
motion-reduce:transition-none flex flex-col
[&_:is(a,button)]:flex [&_:is(a,button)]:w-full
[&_:is(a,button)]:items-center [&_:is(a,button)]:justify-start
[&_:is(a,button)]:gap-2.5 [&_:is(a,button)]:text-left
[&_:is(a,button)]:rounded-md [&_:is(a,button)]:border-0
[&_:is(a,button)]:bg-transparent [&_:is(a,button)]:px-3
[&_:is(a,button)]:py-1.5 [&_:is(a,button)]:font-normal
[&_:is(a,button)]:text-[var(--row-fg,var(--foreground))]
[&_:is(a,button)]:no-underline
[&_:is(a,button):hover]:no-underline
[&_:is(a,button):hover]:bg-surface-hover
[&_:is(a,button):focus-visible]:bg-surface-hover
[&_button[aria-pressed=true]]:bg-surface-active
[&_button[aria-pressed=true]]:text-foreground
[&_button[aria-pressed=true]]:after:ml-auto
[&_button[aria-pressed=true]]:after:content-["✓"]
[&_button[aria-selected=true]]:bg-surface-active
[&_button[aria-selected=true]]:text-foreground
[&_button[aria-selected=true]]:after:ml-auto
[&_button[aria-selected=true]]:after:content-["✓"] max-h-80
min-w-56 gap-0.5 overflow-y-auto p-1
```

Element behaviour

```
{ selection: 'one' }
```

Definition

```ts
'popover.picker': {
  kind: 'semantic',
  description: 'Choices that open from a button, one of which is picked: a sort order, a category. Picking one closes it',
  refs: ['surface.floating', 'arrange.rows'],
  binding: {
    classes: 'max-h-80 min-w-56 gap-0.5 overflow-y-auto p-1',
    behavior: { selection: 'one' },
  },
  notFor: [
    { context: 'commands that do something', instead: 'popover.menu' },
    {
      context: 'a few options that fit on the page',
      instead: 'choice.option',
    },
    { context: 'the button that opens it', instead: 'choice.open' },
  ],
},
```