Select

Picks one option from a closed list, for choices too many for radios.

Refined portWildSelect.vueForms/SelectWSelect

Try it

Open it, arrow through it and choose. The decommissioned bore can’t be picked.

Size

Error

Disabled

<WildSelect
  v-model="site"
  :options="sites"
  placeholder="Choose a site"
  size="sm"
/>

When to use

Use a select to choose one option from a list too long to show at once.
Keep an option that can’t be chosen in the list and disable it, so the list doesn’t change shape.

Don’t use it

For a few options people should compare side by side. Use a Radio group.
For a list long enough to need searching. Use Search select.

Anatomy

A trigger that shows the choice and a chevron, and a list that opens beneath it.

Choose a site

placeholder

Bore 12 — north paddock

chosen

Bore 12 — north paddock

open

<WildSelect v-model="site" placeholder="Choose a site" />
<WildSelect v-model="site" :options="sites" size="lg" />

The placeholder is a prompt, never a label. Give the select a label with Form field.

States

rest

Bore 12

hover

Bore 12

focus

Bore 12

error

Bore 12

disabled

Bore 12

Focus and open share a 2px blue-1000 border and chevron. Open also flips the chevron.

Sizes

Two, matching the input: 36 and 44px.

Bore 12

sm · 36

Bore 12

lg · 44

Accessibility

Screen readers hear a combobox, collapsed or expanded. Focus stays on it while the arrows move through the list, and each option is announced as you reach it.

Key	What it does
Tab	Moves focus to the select.
↓ / ↑	Opens the list, then moves through it, skipping disabled options.
Enter / Space	Opens the list, or chooses the highlighted option.
Escape	Closes the list and keeps focus on the select.

Props

Prop	Type	Default	Description
modelValue	string \| number \| null	—	The chosen value.
options	{ value, label, disabled? }[]	—	The choices, in order.
placeholder	string	—	Shown until something is chosen.
size	'sm' \| 'lg'	'sm'	36px or 44px tall.
disabled	boolean	false	Greys the select and blocks it.
error	boolean \| string	false	Red border; a string also shows the message.

Tokens

Token	Value	Where it lands
--radius-lg	8px	The trigger’s corners, and the list’s.
--color-border-default	#E6E6E6	Border at rest.
--global-blue-1000	#1877F2	Border when focused or open.
--color-error	#E12121	Border on error.
--font-size-sm	12px	Value at sm.
--font-size-md	13px	Value at lg, and every option.
--color-grey-200	#F1F1F1	Highlighted and chosen options.
--global-blue-1100	#0C296A	The chosen option’s text, 12.07:1 on the grey row (blue-1000 would be 3.75:1).
--color-primary-active	#1877F2	Ring on the highlighted option.
--shadow-dropdown	0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04)	The open list.