View on GitHub

Select

A select allows user to pick a value from predefined options.

Usage 

<script>
	import { Select } from 'figblocks';

	let menuItems = [
		{ label: 'Apple', value: 'apple', selected: false },
		{ label: 'Mango', value: 'mango', selected: false },
		{ label: 'Banana', value: 'banana', selected: false }
	];
</script>

<Select bind:menuItems />
// Type definitions
type Menu = {
	value: string;
	label: string;
	selected: boolean;
	group?: string;
	id?: number;
};

type MenuItems = Menu[];

Placeholder

The default placeholder (“Choose an option”) can be overridden by using placeholder prop.

<Select bind:menuItems placeholder="choose a fruit" />

Select with icon

Select accepts iconSvg & iconText props to display icons. Refer Icon component for further detail.

<Select bind:menuItems iconSvg={IconCode} />

Disabled state

The select can be disabled by passing the disabled prop.

<Select bind:menuItems disabled />

Option grouping

The options in the select can be grouped by using the group property in menuItems .

<script>
	import { Select } from 'figblocks';

	let menuItems = [
		{ label: 'Apple', group: 'fruit', value: 'apple', selected: false },
		{ label: 'Mango', group: 'fruit', value: 'mango', selected: false },
		{ label: 'Carrot', group: 'veg', value: 'carrot', selected: false },
		{ label: 'Beetroot', group: 'veg', value: 'beetroot', selected: false }
	];
</script>

<Select bind:menuItems />

Option grouping with labels

The showGroupLabel prop can be passed to explicitly display the group label.

<script>
	import { Select } from 'figblocks';

	let menuItems = [
		{ label: 'Apple', group: 'fruit', value: 'apple', selected: false },
		{ label: 'Mango', group: 'fruit', value: 'mango', selected: false },
		{ label: 'Carrot', group: 'veg', value: 'carrot', selected: false },
		{ label: 'Beetroot', group: 'veg', value: 'beetroot', selected: false }
	];
</script>

<Select bind:menuItems showGrouplabels />

Props

iconSvg string undefined Refer Icon component.
iconText string undefined Refer Icon component.
menuItems Menu[] [] The options for the select in an array.
value Menu | null null The value of the select.
placeholder string “choose an option” Placeholder text.
showGrouplabels boolean false If true, the label for the option groups is displayed.
class string undefined Custom CSS classname for styling.

Events