Prompt Select - Canvas Design System

When to Use

Use Prompt Select when: You want a conversational, inline prompt that guides users to a destination via a dropdown. Ideal for hero sections, landing pages, and contextual navigation where the action reads like a sentence ("I need help with [Goal]").

Don't use when: The user needs to fill in a form field — use Select instead. For navigation with more than 6-8 options, consider a search input or a dedicated listing page.

Default

The standard prompt select with the primary red border and serif-italic label.

I need help with

<?= ws_prompt_select('I need help with', 'goalSelect', [
    '' => 'Goal...',
    'team-building' => 'Team Building',
    'ideation' => 'Ideation',
], ['onchange' => 'goToGoal(this)']) ?>

With Navigation

Use the onchange option to navigate when a selection is made.

Most popular

<?= ws_prompt_select('Most popular', 'popularSelect', [
    '' => 'Workshops, exercises...',
    'workshops' => 'Workshops',
    'exercises' => 'Exercises',
    'icebreakers' => 'Icebreakers',
], ['onchange' => 'goToPopular(this)']) ?>

Muted Variant

A softer version with a gray border and muted label, for secondary or less prominent prompts.

Filter by

<?= ws_prompt_select('Filter by', 'filterSelect', [
    '' => 'Category...',
    'design' => 'Design',
    'leadership' => 'Leadership',
], ['variant' => 'muted']) ?>

Responsive Behaviour

Below 480px, the component stacks vertically. The label sits above the dropdown with reduced font size.

I need help with

Parameters

Parameter	Type	Default	Description
`$label`	string	—	Prompt text (displayed in serif italic)
`$name`	string	—	Select field name and default ID
`$selectOptions`	array	—	Key-value pairs of `value => label`
`value`	string	`''`	Pre-selected value
`onchange`	string	`''`	JavaScript onchange handler
`id`	string	`$name`	Element ID
`class`	string	`''`	Additional CSS classes on wrapper
`variant`	string	`'default'`	`'default'` \| `'muted'`

Anatomy

.ws-prompt-select — Outer flex wrapper

.ws-prompt-select__label — Serif italic prompt text

.ws-prompt-select__dropdown — Select container (flex: 1, max-width: 320px)

.ws-prompt-select__select — Native <select> with branded styling

CSS Classes

Class	Purpose
`.ws-prompt-select`	Base wrapper (flex row, centered)
`.ws-prompt-select--muted`	Muted variant (gray border, subdued label)
`.ws-prompt-select__label`	Serif italic prompt label
`.ws-prompt-select__dropdown`	Dropdown container
`.ws-prompt-select__select`	Styled native select element

Files

File	Purpose
`includes/components/helpers.php`	`ws_prompt_select()` helper function
`includes/components/prompt-select.php`	Component template
`includes/components/components.css`	Prompt Select CSS (`.ws-prompt-select` rules)