Pear

PSelect

PSelect is for native select fields: simple lists, object options, multiple selection, and normal form states. For a little action menu, reach for PDropdown.

Basic Options
vue
<p-field label="Simple string options">
  <p-select
    v-model="cuisine"
    name="cuisine"
    placeholder="Select a cuisine..."
    :options="cuisines"
  />
</p-field>
vue
<p-field label="Object options">
  <p-select
    v-model="mealType"
    name="meal-type"
    placeholder="Select a meal type..."
    :options="mealTypes"
    option-label="name"
    option-value="id"
  />
</p-field>
Multiple Select
vue
<p-field label="Multiple select">
  <p-select
    v-model="selectedCuisines"
    name="selected-cuisines"
    :options="cuisines"
    multiple
    :size="4"
  />
</p-field>
Custom Options
vue
<p-field label="Custom option markup">
  <p-select v-model="customCuisine" name="custom-cuisine">
    <option value="thai">Thai - spicy and bright</option>
    <option value="japanese">Japanese - clean and cozy</option>
    <option value="indian">Indian - warm and layered</option>
  </p-select>
</p-field>
States & Tooltips
This menu uses native select behaviorPick one before saving.
vue
<p-field label="Disabled select" disabled>
  <p-select
    v-model="disabledCuisine"
    name="disabled-cuisine"
    :options="cuisines"
  />
</p-field>

<p-field
  label="Required select"
  error="Pick one before saving."
>
  <p-select
    v-model="invalidCuisine"
    name="invalid-cuisine"
    placeholder="Choose one..."
    :options="cuisines"
    tooltip="This menu uses native select behavior"
    tooltip-placement="bottom"
  />
</p-field>
API

Props

NameTypeDefaultDescription
v-modelstring | number | Array<string | number>-Selected value, or selected values when multiple is true.
optionsArray<string | number | object>[]Options rendered when no default slot is provided.
optionLabelstring'label'Object key used for option text.
optionValuestring'value'Object key used for option value.
placeholderstring-Disabled placeholder option for single selects.
multiplebooleanfalseEnables native multiple selection.
sizenumber-Native visible row count.
disabledbooleanfalseDisables the select. Inherits from PField when present.
invalidbooleanfalseSets aria-invalid. Inherits from PField when present.
tooltipstring-Optional Pico tooltip content.
tooltipPlacementPTooltipPlacement-Optional Pico tooltip placement.

Slots

NameTypeDefaultDescription
defaultslot-Optional custom option markup. When omitted, options are rendered from the options prop.

Events

NameTypeDefaultDescription
update:modelValuestring | number | Array<string | number>-Emitted by v-model when the native select changes.