Select

The select element is used to create a drop-down list. The select element is most often used in a form, to collect user input

Examples

Select

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseSelect } from '@point-hub/papp'

const options = [
  { id: 1, label: 'Durward Reynolds' },
  { id: 2, label: 'Kenton Towne' },
  { id: 3, label: 'Therese Wunsch' },
  { id: 4, label: 'Benedict Kessler' }
]
const form = ref({
  selected: null
})
</script>

<template>
  <form @submit.prevent="">
    <component :is="BaseSelect" v-model="form.selected" :options="options" />
  </form>
</template>

Label

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseSelect } from '@point-hub/papp'

const options = [
  { id: 1, label: 'Durward Reynolds' },
  { id: 2, label: 'Kenton Towne' },
  { id: 3, label: 'Therese Wunsch' },
  { id: 4, label: 'Benedict Kessler' }
]
const form = ref({
  selected1: null,
  selected2: null
})
</script>

<template>
  <form @submit.prevent="">
    <component
      :is="BaseSelect"
      v-model="form.selected1"
      :options="options"
      label="Label"
      layout="vertical"
      description="Vertical Layout"
    />
    <component
      :is="BaseSelect"
      v-model="form.selected2"
      :options="options"
      label="Label"
      layout="horizontal"
      description="Horizontal Layout"
    />
  </form>
</template>

Border

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseSelect } from '@point-hub/papp'

const options = [
  { id: 1, label: 'Durward Reynolds' },
  { id: 2, label: 'Kenton Towne' },
  { id: 3, label: 'Therese Wunsch' },
  { id: 4, label: 'Benedict Kessler' }
]
const form = ref({
  selected1: null,
  selected2: null,
  selected3: null
})
</script>

<template>
  <form @submit.prevent="">
    <component
      :is="BaseSelect"
      v-model="form.selected1"
      :options="options"
      label="Label"
      description="Without Border"
      border="none"
    />
    <component
      :is="BaseSelect"
      v-model="form.selected2"
      :options="options"
      label="Label"
      description="Simple Border"
      border="simple"
    />
    <component
      :is="BaseSelect"
      v-model="form.selected3"
      :options="options"
      label="Label"
      description="Full Border"
      border="full"
    />
  </form>
</template>

Helper

Code

<script setup lang="ts">
import { ref } from 'vue'
import { BaseSelect } from '@point-hub/papp'

const options = [
  { id: 1, label: 'Durward Reynolds' },
  { id: 2, label: 'Kenton Towne' },
  { id: 3, label: 'Therese Wunsch' },
  { id: 4, label: 'Benedict Kessler' }
]

const form = ref({
  selected1: null,
  selected2: null,
  selected3: null,
  selected4: null,
  selected5: options[1]
})

const errors = ref(['Error Example'])
</script>

<template>
  <form @submit.prevent="">
    <component
      :is="BaseSelect"
      v-model="form.selected1"
      :options="options"
      label="Label"
      required
    />
    <component
      :is="BaseSelect"
      v-model="form.selected2"
      :options="options"
      label="Label"
      description="Description example"
    />
    <component
      :is="BaseSelect"
      v-model="form.selected3"
      :options="options"
      label="Label"
      :helpers="['Helper example']"
    />
    <component
      :is="BaseSelect"
      v-model="form.selected4"
      :options="options"
      label="Label"
      v-model:errors="errors"
    />
    <component
      :is="BaseSelect"
      v-model="form.selected5"
      :options="options"
      label="Label"
      disabled
    />
  </form>
</template>

Select API

Types

export interface BaseSelectOptionInterface {
  label: string
  [key: string]: any
}
export type BaseSelectBorderType = 'none' | 'simple' | 'full'
export type BaseFormLayoutType = 'vertical' | 'horizontal'

Props

Name	Type	Default	Description
v-model	BaseSelectOptionInterface		v-model is required.
v-model:errors	string[]		Input error message.
id	string		Input id.
label	string		Input label.
description	string		Input description.
placeholder	string		Input placeholder.
border	BaseSelectBorderType	simple	Input border.
layout	BaseFormLayoutType	vertical	Input layout.
required	boolean	false	if true input is required.
disabled	boolean	false	if true input is disabled.
helpers	string[]		Input helper message.