Tile UI Vue
Source code

Components

NativeSelect

A native select with custom chevron.

Use NativeSelect for a styled native dropdown.

import { NativeSelect, NativeSelectOption } from '@tile-ui/vue';
 
export default function NativeSelectDemo() {
	return (
		<NativeSelect defaultValue="a" aria-label="Fruit" style={{ maxWidth: '260px' }}>
			<NativeSelectOption value="a">Apple</NativeSelectOption>

Registry install

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

Package usage

import { NativeSelect, NativeSelectOption } from '@tile-ui/vue';
 
<NativeSelect defaultValue="a">
	<NativeSelectOption value="a">Option A</NativeSelectOption>
	<NativeSelectOption value="b">Option B</NativeSelectOption>
</NativeSelect>

Highlights

  • Two sizes
  • Option and optgroup
  • Custom chevron

Registry dependencies

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

API reference

NativeSelect

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

NativeSelectOption

No custom props.

NativeSelectOptGroup

No custom props.

PreviousMessageScrollerNextNavigationMenu