SelectInput

Used to pick a value from predefined options.

Demo

React

OrientationHorizontalVertical

SizeSmallMediumLarge

As native select

Clearable

Multiple

Required

Invalid

Disabled

Pet

Select a petDogCatCanaryParrotGoldfishTurtlePlease select your pet

Vue

OrientationHorizontalVertical

SizeSmallMediumLarge

As native select

Clearable

Multiple

Required

Invalid

Disabled

Pet

Select a petDogCatCanaryParrotGoldfishTurtlePlease select your pet

Example

React

// Import component
import {
  createListCollection,
  SelectInput,
  type ListCollectionItem,
} from '@fintech-sandpit/ui/react';
// Import styles (optional). Please note that SelectInput is using Field and Select components.
import '@fintech-sandpit/ui/style/components/field.css';
import '@fintech-sandpit/ui/style/components/select.css';

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 (
  <SelectInput
    collection={collection}
    label="Pet"
    placeholder="Select a pet"
    hint="Please select your pet"
    error="Invalid pet"
  />
);

Vue

<script setup lang="ts">
// Import component
import {
  createListCollection,
  SelectInput,
  type ListCollectionItem,
} from '@fintech-sandpit/ui/vue';
// Import styles (optional). Please note that SelectInput is using Field and Select components.
import '@fintech-sandpit/ui/style/components/field.css';
import '@fintech-sandpit/ui/style/components/select.css';

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>
  <SelectInput
    :collection="collection"
    label="Pet"
    placeholder="Select a pet"
    hint="Please select your pet"
    error="Invalid 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
name	string	—	Name of the input element
collection	Collection	—	Options of the select input
orientation	Orientation	vertical	Orientation of the select input
size	Size	md	Size of the select input
asNative	boolean	false	Whether the input is a native HTML select input
multiple	boolean	false	Whether the select input is multiple
label	string	—	Label of the select input
hint	string	—	Helper text of the select input
error	string	—	Error text of the select input
required	boolean	false	Whether the select input is required
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
name	string	—	Name of the input element
collection	Collection	—	Options of the select input
orientation	Orientation	vertical	Orientation of the select input
size	Size	md	Size of the select input
as-native	boolean	false	Whether the input is a native HTML select input
multiple	boolean	false	Whether the select input is multiple
label	string	—	Label of the select input
hint	string	—	Helper text of the select input
error	string	—	Error text of the select input
required	boolean	false	Whether the select input is required
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
onValueChange	(value: string[]) => void	Callback fired when the value changes

Vue

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

Types

type Collection = ListCollection<ListCollectionItem>

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

type Orientation = 'horizontal' | 'vertical'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'