UxSelectInline
components/ux/SelectInline.vue
Borderless inline view switcher — the current option's label (14 px bold, content-muted) and a small primary caret, over an invisible native <select> that owns the menu, keyboard and accessibility. Keyboard-only focus ring.
People
v-model: "users"
Scenarios
minimalInbound
typical — DataMachine #title-right
Skills
People
Total people with this skill
of 14 people on scanned installs
long labelHarness and version, grouped by install
many options (numeric values)
Top 10
number 10value not in optionsPeople
inherit — DataMachine #title
Violations
The choice is the card's subject
11
inherit — in a sentence
Teams ranked by Violations, worst first.
components/ux/SelectInline.vue
Usage
<UxSelectInline
:options = "[]"
:modelValue = "modelValue"
ariaLabel = "View"
:inherit = "false"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| options | { value, label }[] | [] | The choices; label falls back to value. Values are any primitive — they round-trip unchanged (numbers stay numbers) |
| modelValue | any | undefined | Selected value (v-model), compared with ===; no match shows the first option and emits nothing |
| ariaLabel | String | 'View' | Accessible name — the visible text is only the current option |
| inherit | Boolean | false | Take the surrounding type (size, weight, colour; hover → primary) instead of the 14 px muted switcher style, caret scaled to 0.5em — for a select that IS the text it sits in: a DataMachine #title, a word in a sentence |
Events
| Event | Description |
|---|---|
| update:modelValue | The picked option's value |