Rich Select

Props

Prop	Type	Default	Description
id	string	Auto-generated	Unique identifier for the select element.
icon	string	-	Icon displayed in the label (FgLabel).
label	string	-	Label text above the select.
info	string	-	Additional hint or info below the field.
error	string	-	Error message shown below the field.
options	Array<{ value: string | number; label: string; icon?: string; disabled?: boolean }>	[]	List of selectable options. Icons and disabled options are supported.
class	string	-	Css class name
size	string	-	the input size (xs, sm, lg, xl, xxl)
modelValue	string | number | null	null	Currently selected value. Supports v-model.
placeholder	string	'Select an option'	Placeholder text shown when no value is selected.
searchable	boolean	true	Whether to enable the search field.
searchPlaceholder	string	'Search...'	Placeholder text for the search input.
clearable	boolean	true	Whether the selected option can be cleared.
noResults	string	'No results found'	Message to show when no options match the search term.

Emits

Event	Payload Type	Description
update:modelValue	string | number | null	Emitted when an option is selected or cleared.

Install

import { FgRichSelect } from 'fadgram-vue'

Basic usage

Preview

AI model

Select your model

Gpt

Copilot

Gemini

Grok

vue

<fg-rich-select
  v-model="aiModel"
  label="AI model"
  placeholder="Select your model"
  :options="[
    {
      label: 'Gpt',
      value: 'gpt',
    },
    {
      label: 'Copilot',
      value: 'copilot',
    },
    {
      label: 'Gemini',
      value: 'gemini',
    },
    {
      label: 'Grok',
      value: 'grok',
    },
  ]"
/>

Size

Preview

xs

Select your model

Gpt

Copilot

Gemini

Grok

sm

Select your model

Gpt

Copilot

Gemini

Grok

lg

Select your model

Gpt

Copilot

Gemini

Grok

xl

Select your model

Gpt

Copilot

Gemini

Grok

xxl

Select your model

Gpt

Copilot

Gemini

Grok

vue

<fg-rich-select size="xs" label="xs" placeholder="Select your model" :options="options" />
<fg-rich-select size="sm" label="xs" placeholder="Select your model" :options="options" />
<fg-rich-select size="lg" label="lg" placeholder="Select your model" :options="options" />
<fg-rich-select size="xl" label="xl" placeholder="Select your model" :options="options" />
<fg-rich-select size="xxl" label="xxl" placeholder="Select your model" :options="options" />

Pill

Preview

Pill rich select

Select your model

Gpt

Copilot

Gemini

Grok

vue

<fg-rich-select
  v-model="aiModel"
  label="Pill rich select"
  class="pill"
  placeholder="Select your model"
  :options="options"
/>