Select · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JSelect } from '@juxtui/ui'

Usage #

<JSelect v-model="region" label="Region" :options="regions" />

Options can be plain strings or objects with value, label, an optional description and disabled.

Internally, options flow through a single filtered view. Adding a search field only means setting its query — the navigation, typeahead and ARIA already work against the filtered list.

Variants & examples #

Descriptions and disabled options#

Plan

<script setup lang="ts">
const plan = ref('pro')

const plans = [
  { value: 'hobby', label: 'Hobby', description: 'For personal projects' },
  { value: 'pro', label: 'Pro', description: 'For small teams' },
  { value: 'scale', label: 'Scale', description: 'For growing companies' },
  { value: 'enterprise', label: 'Enterprise', description: 'Contact sales', disabled: true },
]
</script>

<template>
  <JSelect v-model="plan" label="Plan" :options="plans" />
</template>

Custom rendering#

Use the option and value slots.

Status

<script setup lang="ts">
const status = ref('operational')

const statuses = [
  { value: 'operational', label: 'Operational' },
  { value: 'degraded', label: 'Degraded' },
  { value: 'outage', label: 'Outage' },
]

const colors: Record<string, string> = {
  operational: 'bg-accent',
  degraded: 'bg-warning',
  outage: 'bg-danger',
}
</script>

<template>
  <JSelect v-model="status" label="Status" :options="statuses">
    <template #value="{ option }">
      <span class="flex items-center gap-2">
        <span class="size-1.5 rounded-full" :class="colors[option.value]" />
        {{ option.label }}
      </span>
    </template>
    <template #option="{ option }">
      <span class="flex items-center gap-2">
        <span class="size-1.5 rounded-full" :class="colors[option.value]" />
        {{ option.label }}
      </span>
    </template>
  </JSelect>
</template>

Validation#

Role

<script setup lang="ts">
const role = ref<string | null>(null)
const touched = ref(false)
</script>

<template>
  <JSelect
    v-model="role"
    label="Role"
    :options="['Owner', 'Admin', 'Member', 'Viewer']"
    :error="touched && !role ? 'Choose a role to continue.' : undefined"
    required
    @close="touched = true"
  />
</template>

API #

Props

Prop	Type	Default	Description
modelValue	`T \| null`	`null`	Bound with `v-model`. `T` is inferred from your options.
options	`Array<SelectOption<T> \| T>`	—	The options. Strings are shorthand for `{ value, label }`.
placeholder	`string`	`'Select…'`	Shown while nothing is selected.
label	`string`	—	Visible label, also used as the accessible name.
description	`string`	—	Supporting text under the control. Replaced by the error message while one is shown.
error	`string \| boolean`	—	An error message, or `true` to mark the field invalid without a message.
required	`boolean`	`false`	Marks the field as required, natively and visually.
disabled	`boolean`	`false`	Disables the control.
id	`string`	—	Id of the control. Generated (SSR-safe) when omitted.
size	`'sm' \| 'md' \| 'lg'`	`'md'`	Trigger height.
name	`string`	—	Submits the value through a hidden input.

Events

Event	Payload	Description
update:modelValue	`T`	Emitted when an option is chosen.
open	—	The list opened.
close	—	The list closed.

Slots

Slot	Props	Description
option	`{ option, selected, active }`	Custom option content.
value	`{ option }`	Custom content for the selected value in the trigger.
label	—	Custom label content.

Accessibility #

Follows the WAI-ARIA “select-only combobox” pattern: focus never leaves the trigger, and aria-activedescendant tells assistive technology which option is active.
Options expose aria-selected and aria-disabled.
The pointer only moves the active option when it actually moves, so a list opening under a resting cursor doesn’t steal the keyboard position.

Keyboard #

Key	Action
`↓↑`	Open the list; then move between options, skipping disabled ones.
`Enter`	Open the list, or choose the active option.
`Space`	Open the list, or choose the active option (unless you are typing).
`HomeEnd`	Jump to the first or last option.
`PageUpPageDown`	Move ten options at a time.
`A–Z`	Typeahead: jump to the next option starting with the typed letters.
`Tab`	Choose the active option and move on.
`Esc`	Close without changing the value.