Command Palette

Search for a command to run...

Components / Inputs

Select

தேர்வு

Select allows users to choose one option from a list. It replaces the native select element with an accessible, styled dropdown.

பட்டியலிலிருந்து ஒரு விருப்பத்தை தேர்வு செய்ய அனுமதிக்கிறது.

Basic select

Component preview
District selectமாவட்ட தேர்வு

Grouped options

Component preview
Grouped selectதொகுக்கப்பட்ட தேர்வு

Anatomy

Structure

Anatomy

5 parts documented for implementation and review.

Component map
1

SelectTrigger

தூண்டிrequired<button>

Clickable input-like element that opens the dropdown. Shows the currently selected value or placeholder text. Height matches Input (h-10), border uses rounded-md. Includes a ChevronDown icon at the right edge. Receives aria-haspopup and aria-expanded attributes automatically.

2

SelectValue / Placeholder

மதிப்புrequired

Displays the selected value text, or the placeholder when nothing is selected. Placeholder renders at muted-foreground color. For Tamil placeholders, use instructional Tamil: 'மாவட்டத்தை தேர்ந்தெடுக்கவும்'. Value truncates with line-clamp-1 if too long.

3

SelectContent

விருப்ப பலகம்required<div>

Floating dropdown panel positioned below (or above) the trigger. Uses role='listbox' for screen readers. Keyboard navigation: arrow keys to move, Enter to select, Escape to close, type-ahead search by first letter. Animates in with zoom-in-95 and fade.

4

SelectItem

விருப்பம்required<div>

Individual selectable option within the content panel. Uses role='option'. When selected, shows a CheckIcon indicator on the right side. Supports disabled state via pointer-events-none and opacity-50. For Tamil items, text renders with the Tamil font stack.

5

SelectGroup + Label

குழு

Non-interactive section divider for organizing related options. The SelectLabel renders as small muted text (text-xs) above a group of items. Use for categorizing long lists — e.g., 'வடக்கு தமிழ்நாடு' / 'தெற்கு தமிழ்நாடு' for districts by region.

API

Props

5 props
value
Type
string
Default
-
Description
Controlled selected value.
defaultValue
Type
string
Default
-
Description
Uncontrolled default value.
onValueChange
Type
(value: string) => void
Default
-
Description
Called when selection changes.
disabled
Type
boolean
Default
false
Description
Disables the entire select.
placeholder
Type
string
Default
-
Description
Text shown when no value selected. Set on SelectValue.

Tamil-specific guidance

  • Always include both Tamil and English district/state names in government forms.
  • Sort alphabetically in the active UI language. For Tamil: அ→ஔ order.
  • Placeholder should instruct in Tamil: தேர்ந்தெடுக்கவும் not just Select.

Best practices

Always show a placeholder so the field looks empty
தொடக்கத்தில் புலம் காலியாக தெரிய placeholder காட்டவும்

A placeholder like 'மாவட்டத்தை தேர்ந்தெடுக்கவும்' signals that no value is yet selected and prompts the user to act.

'மாவட்டத்தை தேர்ந்தெடுக்கவும்' என்ற placeholder காட்டுவது புலம் காலியாக உள்ளது என்பதை தெளிவாக காட்டும்.

Don't use Select for binary choices
இரண்டு விருப்பங்களுக்கு Select பயன்படுத்தாதே

For two-option choices like Yes/No or Active/Inactive, use a Switch or Radio Group — a Select adds unnecessary interaction.

ஆம்/இல்லை போன்ற இரண்டு விருப்பங்களுக்கு Switch அல்லது RadioGroup பயன்படுத்தவும்.

Group options with SelectGroup and SelectLabel
SelectGroup மற்றும் SelectLabel மூலம் விருப்பங்களை குழுக்களாக தொகுக்கவும்

For long option lists, use SelectGroup with labels to divide them into logical sections for easier scanning.

நீண்ட விருப்ப பட்டியல்களை SelectGroup மூலம் தொகுப்புகளாக பிரிக்கவும்.

Don't put 20+ options in a flat Select
20-க்கும் அதிக விருப்பங்களை தட்டையான Select-ல் வைக்காதே

A Select with many options becomes unusable — switch to a Combobox with search for large option sets.

20-க்கும் அதிக விருப்பங்களுடன் Select பயன்படுத்துவதை தவிர்க்கவும் — தேடல் உள்ள Combobox பயன்படுத்தவும்.