Select

Select

PSelect wraps a native <select> and renders options from an array.

Demo

Usage

<PSelect
  v-model="status"
  :items="items"
  placeholder="Select status"
  required
>
  Status
</PSelect>

data() {
  return {
    status: '',
    items: [
      { id: 'active', label: 'Active' },
      { id: 'paused', label: 'Paused', disabled: true },
    ],
  };
}

Props

Prop	Type	Default	Notes
id	String	''	Optional ID for the <select>.
items	Array	—	Required items with { id, label } (optional fgColor, bgColor).
placeholder	String	Välj ett alternativ	Placeholder label.
value	String | Number	''	v-model value.
errorText	String	''	Override validation message.
showPlaceholderOption	Boolean	true	Show the placeholder option.
required	Boolean	false	Marks the input required.

Events

Event	Payload	Description
input	String | Number	Emits value changes.
change	String | Number	Emits change events.
valid	Boolean	Emits HTML5 validity state.

Slots

Slot	Description
default	Input label text.