Select

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

Demo

React

Vue

Usage

React

import {
  createListCollection,
  Select,
  type ListCollectionItem,
} from '@fintech-sandpit/ui/react';

const collection = createListCollection<ListCollectionItem>({
  items: [
    { label: 'Dog', value: 'dog', group: 'Mammals' },
    { label: 'Cat', value: 'cat', group: 'Mammals' },
    { label: 'Canary', value: 'canary', group: 'Birds' },
    { label: 'Parrot', value: 'parrot', group: 'Birds' },
    { label: 'Goldfish', value: 'goldfish', group: 'Aquatic' },
    { label: 'Turtle', value: 'turtle', group: 'Aquatic', disabled: true },
  ],
  groupBy: item => item.group ?? '',
});

return (
  <Select
    collection={collection}
    placeholder="Select a pet"
  />
);

Vue

<script setup lang="ts">
import {
  createListCollection,
  Select,
  type ListCollectionItem,
} from '@fintech-sandpit/ui/vue';

const collection = createListCollection<ListCollectionItem>({
  items: [
    { label: 'Dog', value: 'dog', group: 'Mammals' },
    { label: 'Cat', value: 'cat', group: 'Mammals' },
    { label: 'Canary', value: 'canary', group: 'Birds' },
    { label: 'Parrot', value: 'parrot', group: 'Birds' },
    { label: 'Goldfish', value: 'goldfish', group: 'Aquatic' },
    { label: 'Turtle', value: 'turtle', group: 'Aquatic', disabled: true },
  ],
  groupBy: item => item.group ?? '',
});
</script>

<template>
  <Select
    :collection="collection"
    placeholder="Select a pet"
  />
</template>

Props

React

Name	Type	Default	Description
value	string[]	—	Controlled value of the select input
defaultValue	string[]	—	Default (uncontrolled) value of the select input
collection	Collection	—	Options of the select input
size	Size	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

Vue

Name	Type	Default	Description
model-value	string[]	—	Controlled value of the select input 1
default-value	string[]	—	Default (uncontrolled) value of the select input
collection	Collection	—	Options of the select input
size	Size	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.

Events

React

Name	Type	Description
onChange	(value: string[]) => void	Callback fired when the value changes

Vue

Name	Payload	Description
update:model-value	string[]	Event emitted when the value changes 1

Types

type Collection = ListCollection<ListCollectionItem>

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

type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'