Select

This component requires the FyskProvider. See Quick Start →

Preview

Select

TypeScript

Installation

bash

1npx shadcn@latest add https://fysk.dev/r/select.json

Usage

tsx

1import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui"
2
3<Select>
4<SelectTrigger>
5  <SelectValue placeholder="Theme" />
6</SelectTrigger>
7<SelectContent>
8  <SelectItem value="light">Light</SelectItem>
9  <SelectItem value="dark">Dark</SelectItem>
10</SelectContent>
11</Select>

Examples

Default

Standard single-item selection dropdown.

Component

TypeScript

Multi Selection

Enables selecting multiple values with built-in tag display and removal.

Component

TypeScript

apple

Features

Unified Selection: A single set of components that intuitively switches between single and multiple modes.
Animated Chips: Multi-select mode features sleek, animated selection chips with individual removal and overflow handling.
Status Integration: Built-in support for loading, success, error states with matching icons and color systems.
Premium Aesthetics: Includes a modern glass variant and smooth micro-animations using Framer Motion.

Props

Select

Prop	Type	Default	Description
`selection`	`"single" \| "multiple"`	`"single"`	The selection mode of the component.
`value`	`string`	-	Controlled value for single selection mode.
`defaultValue`	`string`	-	Initial value for single selection mode.
`onValueChange`	`(value: string) => void`	-	Callback when the value changes in single mode.
`values`	`string[]`	-	Controlled values for multiple selection mode.
`defaultValues`	`string[]`	-	Initial values for multiple selection mode.
`onValuesChange`	`(values: string[]) => void`	-	Callback when values change in multiple mode.
`maxDisplayItems`	`number`	`1`	Max number of tags to show in the trigger before "+X more".
`disabled`	`boolean`	`false`	Disables the entire component.
`open`	`boolean`	-	Controlled open state of the dropdown.
`defaultOpen`	`boolean`	`false`	Initial open state.
`onOpenChange`	`(open: boolean) => void`	-	Callback when the open state changes.

SelectTrigger

Prop	Type	Default	Description
`variant`	`"default" \| "outline" \| "ghost" \| "glass" \| "destructive" \| "success" \| "warning" \| "info"`	`"default"`	Visual style of the trigger.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	Height of the trigger.
`state`	`"idle" \| "loading" \| "success" \| "error"`	`"idle"`	Overrides the `variant` styling and shows appropriate status icons.

All other components (SelectContent, SelectItem, SelectGroup, etc.) accept the standard Radix UI Select attributes.