AccessibleSelect

import AccessibleSelect from "@wikicasa-dev/components/UIKit/AccessibleSelect";

Use to pick exactly one value from a short, known list inside a form or filter bar: contract type, property condition, typology, sort order. It looks like BaseInput. For long or remote lists use ClearableAutocomplete; for 2–4 always-visible choices consider RadioButtonGroup; for a menu of actions or links use BaseDropDown.

Options are objects { id, label } (optional visibleLabel, shown in the closed field instead of label; extra fields are kept). v-model holds the whole selected option.

#Usage

<script setup lang="ts">
import { ref } from "vue";
import AccessibleSelect from "@wikicasa-dev/components/UIKit/AccessibleSelect";
import type { AccessibleSelectOptions } from "@wikicasa-dev/components";

const conditions: AccessibleSelectOptions[] = [
  { id: 1, label: "Nuovo / In costruzione" },
  { id: 2, label: "Ottimo / Ristrutturato" },
  { id: 3, label: "Buono / Abitabile" },
  { id: 4, label: "Da ristrutturare" },
];
const condition = ref<AccessibleSelectOptions>();
const submitted = ref(false);
</script>

<template>
  <AccessibleSelect
    v-model="condition"
    namespace="property-condition"
    label="Stato dell'immobile"
    :options="conditions"
    :is-valid="submitted && !condition?.label ? false : null"
    :feedback="{ invalid: 'Campo obbligatorio' }"
  />
</template>

#Do / Don't

• Do always set label: it acts as the placeholder while empty, floats once a value is chosen, and names the combobox for screen readers.
• Do give every option a unique label: the selected option is matched by label, not by id.
• Do set namespace when the same page renders more than one select, to get stable, readable element ids.
• Do use dropdownPosition="top" near the bottom of the viewport or a modal.
• Do use :with-fieldset="false" (and :border="false") to embed it borderless in a composite search bar.
• Do use v-model:open to know or control whether the list is open. The update:dropdownState event is never emitted.
• Don't put links or actions in options; it is a form control.

#Styling hooks

• .uikit-select-wrapper { --btn-height } (default 48px): height of the field.
• .uikit-select-dropdown (the list) exposes --dropdown-max-height (225px), --dropdown-min-width, --dropdown-margin-top (10px), --dropdown-border-color and the BaseDropDown border-radius variables.
• lefticon slot for a leading icon; arrowIcon sets size, stroke color and classes of the chevron.
• Class props: wrapperClasses, btnClasses, btnTextClasses, labelClasses, fieldsetClasses, legendClasses, dropdownClasses, dropdownItemClasses.

#API

Generated from the component's types. Do not edit by hand.

Props

Name	Type	Default	Required	Description
label	string	""
dropdownPosition	"top" | "bottom"	"bottom"
namespace	string
options	AccessibleSelectOptions<TPayload, TID>[]		yes
isValid	boolean | null	null
feedback	Partial<{ valid: string; invalid: string; }>
closeOnBodyPressed	boolean	true		If true, we will close the dropdown when we touch the body of the document
border	boolean	true
withFieldset	boolean	true
fieldsetClasses	ClassTypeProp
legendClasses	ClassTypeProp
dropdownClasses	ClassTypeProp
labelClasses	ClassTypeProp
btnClasses	ClassTypeProp
dropdownItemClasses	ClassTypeProp
btnTextClasses	ClassTypeProp
arrowIcon	Partial<{ width: number; height: number; strokeColor: #${string}; classes: ClassTypeProp; }>
dataCy	string
wrapperClasses	ClassTypeProp
modelValue	Optional<AccessibleSelectOptions<TPayload, TID>>	({ id: "", label: "" }) as unknown as AccessibleSelectOptions<TPayload, TID>
open	boolean	false

Events

Name	Payload
click	[MouseEvent]
update:dropdownState	[boolean]
update:modelValue	[value: Optional<AccessibleSelectOptions<TPayload, TID>>]
update:open	[value: boolean]

v-model

• v-model binds modelValue (Optional<AccessibleSelectOptions<TPayload, TID>>)
• v-model:open (boolean)

Slots

Name	Slot props
lefticon

Exposed (template ref)

None.