PaperSelect

A paper-styled select trigger for compact option picking.

↗ menus can be calm and still unmistakable.

Preview

Framework

⌄

import * as React from 'react'
import { cn } from '@/lib/utils'

export interface PaperSelectOption {
  label: string
  value: string

Copy this file into your project, export its barrel, and then add it to the master UI index.

Step 1.Create this file:
components/ui/paperSelect/paperSelect.tsx⎘
Step 2.Create the barrel:
components/ui/paperSelect/index.ts⎘
Step 3.Add this export in components/ui/index.ts:
```
export * from './paperSelect'
```

Default

⌄

Labeled

Plan

⌄

Prop	Type	Default	Description
`options`	`PaperSelectOption[]`	`[]`	List of selectable label/value options.
`label`	`string`	`undefined`	Optional field label above control.
`hint`	`string`	`undefined`	Small helper text below control.

Use for small finite option sets in settings forms.

⌄

<PaperSelect options={[{ label: 'Starter', value: 'starter' }]} />

Pairs well with mono labels for operational UIs.

Environment

⌄

<PaperSelect label="Environment" options={...} />