choice.open

Shows what is picked and opens the choices to change it: a sort order, sources. The trigger of a Popover picker

Component

<Action>

Renders

<button>

Profile

View as Markdown

Choice intents

Example

Preview

defaultdisabled

<Action intent="choice.open" onClick={openItem}>Open</Action>

Choosing between neighbours

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

If it is
Use
Shows what is picked and opens the choices to change it: a sort order, sources. The trigger of a Popover picker
choice.open this page
One of a few options shown on the page
choice.option
Picking a sort order from a list of choices
rather than action.sort
choice.open this page
The button that opens it
rather than popover.picker
choice.open 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
control.select

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 choice.open 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.

control.select

Looks like a form field with a chevron: a button that opens choices

inline-flex min-w-40 cursor-pointer items-center justify-between
gap-2 rounded-md border border-input bg-background px-3 py-2
text-sm text-foreground transition-colors hover:bg-surface-hover
focus-visible:outline-none focus-visible:ring-2
focus-visible:ring-ring disabled:pointer-events-none
disabled:opacity-50 after:mr-1 after:size-2 after:shrink-0
after:-translate-y-0.5 after:rotate-45 after:border-b-[1.5px]
after:border-r-[1.5px] after:border-surface-muted
after:content-[""]

choice.open
Shows what is picked and opens the choices to change it: a sort order, sources. The trigger of a Popover picker

Final classes

inline-flex min-w-40 cursor-pointer items-center justify-between
gap-2 rounded-md border border-input bg-background px-3 py-2
text-sm text-foreground transition-colors hover:bg-surface-hover
focus-visible:outline-none focus-visible:ring-2
focus-visible:ring-ring disabled:pointer-events-none
disabled:opacity-50 after:mr-1 after:size-2 after:shrink-0
after:-translate-y-0.5 after:rotate-45 after:border-b-[1.5px]
after:border-r-[1.5px] after:border-surface-muted
after:content-[""]

Definition

'choice.open': {
  kind: 'semantic',
  description: 'Shows what is picked and opens the choices to change it: a sort order, sources. The trigger of a Popover picker',
  refs: ['control.select'],
  notFor: [
    {
      context: 'one of a few options shown on the page',
      instead: 'choice.option',
    },
  ],
},