Select

Usage

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from '@acronis-platform/shadcn-uikit';

Basic

A simple select with string options.

View source

import * as React from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@acronis-platform/shadcn-uikit';

export function BasicSelect() {
  return (
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="orange">Orange</SelectItem>
        <SelectItem value="grape">Grape</SelectItem>
        <SelectItem value="pineapple">Pineapple</SelectItem>
      </SelectContent>
    </Select>
  );
}

Controlled

Select with externally managed state.

Framework

View source

import * as React from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@acronis-platform/shadcn-uikit';
import { Label } from '@acronis-platform/shadcn-uikit/react';

export function ControlledSelect() {
  const [value, setValue] = React.useState<string>('');

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="framework">Framework</Label>
        <Select
          value={value}
          onValueChange={(newValue) => setValue(newValue as string)}
        >
          <SelectTrigger id="framework" className="w-[280px]">
            <SelectValue placeholder="Select a framework" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="react">React</SelectItem>
            <SelectItem value="vue">Vue</SelectItem>
            <SelectItem value="angular">Angular</SelectItem>
            <SelectItem value="svelte">Svelte</SelectItem>
            <SelectItem value="solid">Solid</SelectItem>
          </SelectContent>
        </Select>
      </div>
      {value && (
        <p className="text-sm text-muted-foreground">
          Selected framework: {value}
        </p>
      )}
    </div>
  );
}

Grouped

Options organized into labeled groups.

View source

import * as React from 'react';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from '@acronis-platform/shadcn-uikit';

export function GroupedSelect() {
  return (
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select a timezone" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>North America</SelectLabel>
          <SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
          <SelectItem value="cst">Central Standard Time (CST)</SelectItem>
          <SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
          <SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
        </SelectGroup>
        <SelectGroup>
          <SelectLabel>Europe</SelectLabel>
          <SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
          <SelectItem value="cet">Central European Time (CET)</SelectItem>
          <SelectItem value="eet">Eastern European Time (EET)</SelectItem>
        </SelectGroup>
        <SelectGroup>
          <SelectLabel>Asia</SelectLabel>
          <SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
          <SelectItem value="kst">Korea Standard Time (KST)</SelectItem>
          <SelectItem value="ist">India Standard Time (IST)</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

Multiple

Select supporting multiple selected values.

Tags (Multiple)

View source

import * as React from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@acronis-platform/shadcn-uikit';
import { Label } from '@acronis-platform/shadcn-uikit/react';

export function MultipleSelect() {
  const [values, setValues] = React.useState<string[]>([]);

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="tags">Tags (Multiple)</Label>
        <Select
          value={values}
          onValueChange={(newValues) => setValues(newValues as string[])}
          multiple
        >
          <SelectTrigger id="tags" className="w-[280px]">
            <SelectValue placeholder="Select tags" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="react">React</SelectItem>
            <SelectItem value="typescript">TypeScript</SelectItem>
            <SelectItem value="tailwind">Tailwind CSS</SelectItem>
            <SelectItem value="nextjs">Next.js</SelectItem>
            <SelectItem value="vite">Vite</SelectItem>
            <SelectItem value="nodejs">Node.js</SelectItem>
          </SelectContent>
        </Select>
      </div>
      {values.length > 0 && (
        <div className="text-sm text-muted-foreground">
          <p>Selected tags: {values.join(', ')}</p>
        </div>
      )}
    </div>
  );
}

Object Values

Select using objects as option values.

Select User

View source

import * as React from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@acronis-platform/shadcn-uikit';
import { Label } from '@acronis-platform/shadcn-uikit/react';

interface User {
  id: number;
  name: string;
  email: string;
}

const users: User[] = [
  { id: 1, name: 'John Doe', email: 'john@example.com' },
  { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
  { id: 3, name: 'Bob Johnson', email: 'bob@example.com' },
  { id: 4, name: 'Alice Williams', email: 'alice@example.com' },
];

export function ObjectValuesSelect() {
  const [selectedUser, setSelectedUser] = React.useState<User | null>(null);

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="user">Select User</Label>
        <Select
          value={selectedUser}
          onValueChange={(user) => setSelectedUser(user as User)}
          isItemEqualToValue={(a, b) => a.id === b.id}
          itemToStringLabel={(user) => user.name}
          itemToStringValue={(user) => user.id.toString()}
        >
          <SelectTrigger id="user" className="w-[280px]">
            <SelectValue placeholder="Select a user" />
          </SelectTrigger>
          <SelectContent>
            {users.map((user) => (
              <SelectItem key={user.id} value={user}>
                <div className="flex flex-col items-start">
                  <span className="font-medium">{user.name}</span>
                  <span className="text-xs text-muted-foreground">
                    {user.email}
                  </span>
                </div>
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
      </div>
      {selectedUser && (
        <div className="text-sm text-muted-foreground">
          <p>
            Selected: {selectedUser.name} ({selectedUser.email})
          </p>
        </div>
      )}
    </div>
  );
}

Disabled

Select in a disabled state.

Disabled Select

With Disabled Options

View source

import * as React from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@acronis-platform/shadcn-uikit';

export function DisabledSelect() {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <p className="text-sm font-medium">Disabled Select</p>
        <Select disabled>
          <SelectTrigger className="w-[280px]">
            <SelectValue placeholder="Select an option" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="option1">Option 1</SelectItem>
            <SelectItem value="option2">Option 2</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="space-y-2">
        <p className="text-sm font-medium">With Disabled Options</p>
        <Select>
          <SelectTrigger className="w-[280px]">
            <SelectValue placeholder="Select a plan" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="free">Free</SelectItem>
            <SelectItem value="basic">Basic</SelectItem>
            <SelectItem value="pro">Pro</SelectItem>
            <SelectItem value="enterprise" disabled>
              Enterprise (Coming Soon)
            </SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}

Formatted Value

Select with custom value rendering.

Color

View source

import * as React from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@acronis-platform/shadcn-uikit';
import { Label } from '@acronis-platform/shadcn-uikit/react';

export function FormattedValueSelect() {
  const [value, setValue] = React.useState<string>('');

  const _formatValue = (val: string) => {
    if (!val) return '';
    return `Selected: ${val.toUpperCase()}`;
  };

  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <Label htmlFor="color">Color</Label>
        <Select
          value={value}
          onValueChange={(newValue) => setValue(newValue as string)}
        >
          <SelectTrigger id="color" className="w-[280px]">
            <SelectValue placeholder="Select a color">
              {value && (
                <span className="flex items-center gap-2">
                  <span
                    className="h-4 w-4 rounded-full border"
                    style={{ backgroundColor: value }}
                  />
                  {value}
                </span>
              )}
            </SelectValue>
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="#ef4444">
              <span className="flex items-center gap-2">
                <span className="h-4 w-4 rounded-full border bg-red-500" />
                Red
              </span>
            </SelectItem>
            <SelectItem value="#3b82f6">
              <span className="flex items-center gap-2">
                <span className="h-4 w-4 rounded-full border bg-blue-500" />
                Blue
              </span>
            </SelectItem>
            <SelectItem value="#22c55e">
              <span className="flex items-center gap-2">
                <span className="h-4 w-4 rounded-full border bg-green-500" />
                Green
              </span>
            </SelectItem>
            <SelectItem value="#eab308">
              <span className="flex items-center gap-2">
                <span className="h-4 w-4 rounded-full border bg-yellow-500" />
                Yellow
              </span>
            </SelectItem>
          </SelectContent>
        </Select>
      </div>
    </div>
  );
}

Scrollable

Select with a long list of options that scrolls.

View source

import * as React from 'react';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@acronis-platform/shadcn-uikit';

const countries = [
  { code: 'af', name: 'Afghanistan' },
  { code: 'al', name: 'Albania' },
  { code: 'dz', name: 'Algeria' },
  { code: 'ar', name: 'Argentina' },
  { code: 'au', name: 'Australia' },
  { code: 'at', name: 'Austria' },
  { code: 'bd', name: 'Bangladesh' },
  { code: 'be', name: 'Belgium' },
  { code: 'br', name: 'Brazil' },
  { code: 'ca', name: 'Canada' },
  { code: 'cl', name: 'Chile' },
  { code: 'cn', name: 'China' },
  { code: 'co', name: 'Colombia' },
  { code: 'dk', name: 'Denmark' },
  { code: 'eg', name: 'Egypt' },
  { code: 'fi', name: 'Finland' },
  { code: 'fr', name: 'France' },
  { code: 'de', name: 'Germany' },
  { code: 'gr', name: 'Greece' },
  { code: 'in', name: 'India' },
  { code: 'id', name: 'Indonesia' },
  { code: 'ie', name: 'Ireland' },
  { code: 'il', name: 'Israel' },
  { code: 'it', name: 'Italy' },
  { code: 'jp', name: 'Japan' },
  { code: 'mx', name: 'Mexico' },
  { code: 'nl', name: 'Netherlands' },
  { code: 'nz', name: 'New Zealand' },
  { code: 'no', name: 'Norway' },
  { code: 'pk', name: 'Pakistan' },
  { code: 'pl', name: 'Poland' },
  { code: 'pt', name: 'Portugal' },
  { code: 'ru', name: 'Russia' },
  { code: 'sa', name: 'Saudi Arabia' },
  { code: 'sg', name: 'Singapore' },
  { code: 'za', name: 'South Africa' },
  { code: 'kr', name: 'South Korea' },
  { code: 'es', name: 'Spain' },
  { code: 'se', name: 'Sweden' },
  { code: 'ch', name: 'Switzerland' },
  { code: 'th', name: 'Thailand' },
  { code: 'tr', name: 'Turkey' },
  { code: 'ua', name: 'Ukraine' },
  { code: 'ae', name: 'United Arab Emirates' },
  { code: 'uk', name: 'United Kingdom' },
  { code: 'us', name: 'United States' },
  { code: 'vn', name: 'Vietnam' },
];

export function ScrollableSelect() {
  return (
    <Select>
      <SelectTrigger className="w-[280px]">
        <SelectValue placeholder="Select a country" />
      </SelectTrigger>
      <SelectContent>
        {countries.map((country) => (
          <SelectItem key={country.code} value={country.code}>
            {country.name}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  );
}

Select wraps Base UI Select.Root and accepts value, defaultValue, and onValueChange. SelectTrigger, SelectItem, SelectLabel, and SelectSeparator extend their respective Base UI primitive props.

Edit on GitHub

Select

Usage

Basic

Controlled

Grouped

Multiple

Object Values

Disabled

Formatted Value

Scrollable

API Reference

SelectContent

On this page