Selects | 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

Simple string options

vue

<p-field label="Simple string options">
  <p-select
    v-model="cuisine"
    name="cuisine"
    placeholder="Select a cuisine..."
    :options="cuisines"
  />
</p-field>

Object options

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

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

Custom option markup

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

Disabled select

Required selectPick 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

Name	Type	Default	Description
`v-model`	`string \| number \| Array<string \| number>`	-	Selected value, or selected values when multiple is true.
`options`	`Array<string \| number \| object>`	[]	Options rendered when no default slot is provided.
`optionLabel`	`string`	'label'	Object key used for option text.
`optionValue`	`string`	'value'	Object key used for option value.
`placeholder`	`string`	-	Disabled placeholder option for single selects.
`multiple`	`boolean`	false	Enables native multiple selection.
`size`	`number`	-	Native visible row count.
`disabled`	`boolean`	false	Disables the select. Inherits from PField when present.
`invalid`	`boolean`	false	Sets aria-invalid. Inherits from PField when present.
`tooltip`	`string`	-	Optional Pico tooltip content.
`tooltipPlacement`	`PTooltipPlacement`	-	Optional Pico tooltip placement.

Slots

Name	Type	Default	Description
`default`	`slot`	-	Optional custom option markup. When omitted, options are rendered from the options prop.

Events

Name	Type	Default	Description
`update:modelValue`	`string \| number \| Array<string \| number>`	-	Emitted by v-model when the native select changes.