Skip to main content
Explore the live, interactive preview at tuturuuu.com/ui/components/select.
Category: Inputs · Import: @tuturuuu/ui/select · Status: Live preview

​
Installation

Install the shared UI package, import global styles once, then import the component from its public subpath. 
bun add @tuturuuu/ui

import '@tuturuuu/ui/globals.css';
import { Select, SelectTrigger, SelectContent, SelectItem } from '@tuturuuu/ui/select';

​
Usage

Copy the default usage snippet and adapt labels, state, and event handlers to the product surface. 
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@tuturuuu/ui/select';

<Select><SelectTrigger><SelectValue placeholder="Choose" /></SelectTrigger><SelectContent><SelectItem value="one">One</SelectItem></SelectContent></Select>

​
Examples

Examples reuse the registry snippets so the docs stay aligned with the component catalog.

​
Default

A minimal implementation using the current registry snippet. 
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@tuturuuu/ui/select';

<Select><SelectTrigger><SelectValue placeholder="Choose" /></SelectTrigger><SelectContent><SelectItem value="one">One</SelectItem></SelectContent></Select>

​
Composition

Use the grouped exports when the primitive has slots, triggers, content regions, or providers. 
import {
  Select,
  SelectTrigger,
  SelectContent,
  SelectItem,
} from '@tuturuuu/ui/select';

​
Package import

Import through the public package path so workspace and external apps share the same contract. 
// Public package import
import { Select } from '@tuturuuu/ui/select';

// Workspace apps should keep importing through the package boundary.

​
API reference

The public exports currently available from this component entry.
ExportKind
Selectcomponent
SelectTriggercomponent
SelectContentcomponent
SelectItemcomponent

​
Customization

Common props, states, and composition points to review before using this component.
  • Options
  • Placeholder
  • Disabled state