kosori

Select

A common form component for choosing a predefined value in a dropdown menu.

Select wraps the Base UI Select primitive, composes its trigger, popup and items, and marks each part with data-slot. It is a client component: it manages focus inside a portal and animates with tw-animate-css.

Installation

npx shadcn@latest add @kosori/select

Example

select-example.tsx
select-example
import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

const items = [
  { label: 'Next.js', value: 'next' },
  { label: 'Vite', value: 'vite' },
  { label: 'Astro', value: 'astro' },
];

const SelectExample = () => (
  <Select defaultValue='next' items={items}>
    <SelectTrigger aria-label='Select framework'>
      <SelectValue />
    </SelectTrigger>
    <SelectPopup>
      {items.map(({ label, value }) => (
        <SelectItem key={value} value={value}>
          {label}
        </SelectItem>
      ))}
    </SelectPopup>
  </Select>
);

export default SelectExample;

Usage

import {
  Select,
  SelectItem,
  SelectPopup,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';

const frameworks = [
  { label: 'Next.js', value: 'next' },
  { label: 'Vite', value: 'vite' },
];

const SelectDemo = () => (
  <Select defaultValue='next' items={frameworks}>
    <SelectTrigger aria-label='Select framework'>
      <SelectValue />
    </SelectTrigger>
    <SelectPopup>
      {frameworks.map(({ label, value }) => (
        <SelectItem key={value} value={value}>
          {label}
        </SelectItem>
      ))}
    </SelectPopup>
  </Select>
);

Variants

PartPropValues
SelectTriggersizedefault, lg, sm

Scroll Area

A native scroll container with custom scrollbars.

Separator

A separator element accessible to screen readers.

On this page

InstallationExampleUsageVariants