Apple
Banana
Cherry
Tile UI Vue
Source code

Components

Select

Custom select dropdown.

Use Select to pick one value from a styled dropdown.

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from '@tile-ui/vue';
 
export default function SelectDemo() {
	return (
		<Select defaultValue="apple">
			<SelectTrigger aria-label="Fruit" style={{ width: '220px' }}>

Registry install

pnpm dlx shadcn@latest add @tile-ui/select

Package usage

import { Select, SelectTrigger, SelectContent, SelectItem } from '@tile-ui/vue';
 
<Select>
	<SelectTrigger>Choose a fruit</SelectTrigger>
	<SelectContent>
		<SelectItem value="apple">Apple</SelectItem>
		<SelectItem value="banana">Banana</SelectItem>
	</SelectContent>
</Select>

Highlights

  • Trigger, content, and item
  • Group, label, and separator
  • Controlled and uncontrolled

Registry dependencies

Item Purpose
select Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

Select

Prop Type Default
open boolean —
defaultOpen boolean —
onOpenChange (open: boolean) => void —
value string —
defaultValue string —
onValueChange (value: string) => void —

SelectTrigger

Prop Type Default
size 'sm' | 'default' —

SelectContent

Prop Type Default
position 'item-aligned' | 'popper' —
align 'start' | 'center' | 'end' —
sideOffset number —

SelectItem

Prop Type Default
value string —
disabled boolean —
PreviousScrollAreaNextSeparator