Select

Displays a list of options for the user to pick from.

Demo

React

Vue

Example

React

import {
  createListCollection,
  Select,
} from '@fintech-sandpit/ui/react';
import '@fintech-sandpit/ui/style/components/select.css';

const collection = createListCollection({
  items: [
    { label: 'Dog', value: 'dog', description: 'A dog is known for its loyalty and companionship.', group: 'Mammals' },
    { label: 'Cat', value: 'cat', description: 'A cat is known for its independence and curiosity.', group: 'Mammals' },
    { label: 'Canary', value: 'canary', description: 'A canary is known for its song.', group: 'Birds' },
    { label: 'Parrot', value: 'parrot', description: 'A parrot is known for its intelligence and ability to mimic human speech.', group: 'Birds' },
    { label: 'Goldfish', value: 'goldfish', description: 'A goldfish is known for its beauty and rarity.', group: 'Aquatic' },
    { label: 'Turtle', value: 'turtle', description: 'A turtle is known for its longevity and wisdom.', group: 'Aquatic', disabled: true },
  ],
  groupBy: item => item.group ?? '',
});

return (
  <Select
    collection={collection}
    placeholder="Select a pet"
    ItemText={({ item }) => (
      <div className="flex flex-col gap-1">
        <span>
          {item.label}
        </span>

        <span className="text-sm text-gray-400 dark:text-gray-600">
          {item.description}
        </span>
      </div>
    )}
  />
);

Vue

<script setup lang="ts">
import {
  createListCollection,
  Select,
} from '@fintech-sandpit/ui/vue';
import '@fintech-sandpit/ui/style/components/select.css';

const collection = createListCollection({
  items: [
    { label: 'Dog', value: 'dog', description: 'A dog is known for its loyalty and companionship.', group: 'Mammals' },
    { label: 'Cat', value: 'cat', description: 'A cat is known for its independence and curiosity.', group: 'Mammals' },
    { label: 'Canary', value: 'canary', description: 'A canary is known for its song.', group: 'Birds' },
    { label: 'Parrot', value: 'parrot', description: 'A parrot is known for its intelligence and ability to mimic human speech.', group: 'Birds' },
    { label: 'Goldfish', value: 'goldfish', description: 'A goldfish is known for its beauty and rarity.', group: 'Aquatic' },
    { label: 'Turtle', value: 'turtle', description: 'A turtle is known for its longevity and wisdom.', group: 'Aquatic', disabled: true },
  ],
  groupBy: item => item.group ?? '',
});
</script>

<template>
  <Select
    :collection="collection"
    placeholder="Select a pet"
  >
    <template #item="{ item }">
      <div class="flex flex-col gap-1">
        <span>
          {{ item.label }}
        </span>

        <span class="text-sm text-gray-400 dark:text-gray-600">
          {{ item.description }}
        </span>
      </div>
    </template>
  </Select>
</template>

Props

React

Name	Type	Default	Description
value	string | string[]	—	Controlled value of the select input 1
defaultValue	string | string[]	—	Default (uncontrolled) value of the select input 1
collection	Collection	—	Options of the select input
size	FieldSize	md	Size of the select input
multiple	boolean	false	Whether the select input is multiple
clearable	boolean	false	Whether the select input is clearable (a ‘x’ icon is shown)
invalid	boolean	false	Whether the select input is invalid
readOnly	boolean	false	Whether the select input is read only
disabled	boolean	false	Whether the select input is disabled
placeholder	string	—	Placeholder of the select input

1. The value type is string for single selection (multiple is false) and string[] for multiple selection (multiple is true).

Vue

Name	Type	Default	Description
model-value	string | string[]	—	Controlled value of the select input 1, 2
default-value	string | string[]	—	Default (uncontrolled) value of the select input
collection	Collection	—	Options of the select input
size	FieldSize	md	Size of the select input
multiple	boolean	false	Whether the select input is multiple
clearable	boolean	false	Whether the select input is clearable (a ‘x’ icon is shown)
invalid	boolean	false	Whether the select input is invalid
read-only	boolean	false	Whether the select input is read only
disabled	boolean	false	Whether the select input is disabled
placeholder	string	—	Placeholder of the select input

1. Can be used with the v-model directive for two-way binding.
2. The value type is string for single selection (multiple is false) and string[] for multiple selection (multiple is true).

Events

React

Name	Type	Description
onValueChange	(value: string | string[]) => void	Callback fired when the value changes 1
onValueClear	() => void	Callback fired when the value is cleared

1. The value type is string for single selection (multiple is false) and string[] for multiple selection (multiple is true).

Vue

Name	Payload	Description
update:model-value	string | string[]	Event emitted when the value changes 1
clear	void	Event emitted when the value is cleared

1. The value type is string for single selection (multiple is false) and string[] for multiple selection (multiple is true).

Slots

React

Prop name	Props	Description
ItemText	{ item: ListCollectionItem; }	Component for the custom item text

Vue

Slot name	Props	Description
item-text	{ item: ListCollectionItem; }	Slot for the custom item text

Types

type Collection = ListCollection<ListCollectionItem>

type FieldSize = 'sm' | 'md' | 'lg'

type ListCollectionItem = {
  label: string;
  value: string;
  disabled?: boolean;
  group?: string;
}