Select

Installation

npm install @radix-ui/react-select@^2.2.6 @tabler/icons-react@^3.36.1 class-variance-authority@^0.7.1 clsx@^2.1.1 tailwind-merge@^3.4.0

components/overlay-layout/overlay-layout.ts
lib/field-size.ts
lib/icons.ts
lib/motion.ts
lib/utils.ts
components/select/index.ts
components/select/select.tsx

Code

'use client';

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

export default function SelectDemo() {
  return (
    <Select>
      <SelectTrigger className="nx:w-[180px]" aria-label="Fruit">
        <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="mango">Mango</SelectItem>
      </SelectContent>
    </Select>
  );
}

Props

Select

Select adds no props of its own; it accepts the props of the element or primitive it wraps.

SelectContent

SelectContent adds no props of its own; it accepts the props of the element or primitive it wraps.

SelectGroup

SelectGroup adds no props of its own; it accepts the props of the element or primitive it wraps.

SelectItem

SelectItem adds no props of its own; it accepts the props of the element or primitive it wraps.

SelectLabel

SelectLabel adds no props of its own; it accepts the props of the element or primitive it wraps.

SelectScrollDownButton

SelectScrollDownButton adds no props of its own; it accepts the props of the element or primitive it wraps.

SelectScrollUpButton

SelectScrollUpButton adds no props of its own; it accepts the props of the element or primitive it wraps.

SelectSeparator

SelectSeparator adds no props of its own; it accepts the props of the element or primitive it wraps.

SelectTrigger

SelectTrigger props
Prop	Type	Default	Description
`size`	`"default" \| "sm" \| "lg" \| null`	`"default"`	No description
`variant`	`"borderless" \| "bordered" \| null`	`"bordered"`	No description

SelectValue

SelectValue adds no props of its own; it accepts the props of the element or primitive it wraps.

Examples

Variants

'use client';

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

export default function SelectVariants() {
  return (
    <div className="nx:flex nx:w-full nx:max-w-[180px] nx:flex-col nx:gap-3">
      <Select>
        <SelectTrigger variant="bordered" aria-label="Theme">
          <SelectValue placeholder="Bordered" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="light">Light</SelectItem>
          <SelectItem value="dark">Dark</SelectItem>
          <SelectItem value="system">System</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger variant="borderless" aria-label="Theme">
          <SelectValue placeholder="Borderless" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="light">Light</SelectItem>
          <SelectItem value="dark">Dark</SelectItem>
          <SelectItem value="system">System</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}

Sizes

'use client';

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

export default function SelectSizes() {
  return (
    <div className="nx:flex nx:w-full nx:max-w-[180px] nx:flex-col nx:gap-3">
      <Select>
        <SelectTrigger size="sm" aria-label="Plan">
          <SelectValue placeholder="Small" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="free">Free</SelectItem>
          <SelectItem value="pro">Pro</SelectItem>
          <SelectItem value="team">Team</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger size="default" aria-label="Plan">
          <SelectValue placeholder="Default" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="free">Free</SelectItem>
          <SelectItem value="pro">Pro</SelectItem>
          <SelectItem value="team">Team</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger size="lg" aria-label="Plan">
          <SelectValue placeholder="Large" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="free">Free</SelectItem>
          <SelectItem value="pro">Pro</SelectItem>
          <SelectItem value="team">Team</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}

Placeholder

'use client';

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

export default function SelectPlaceholder() {
  return (
    <div className="nx:flex nx:w-full nx:max-w-[180px] nx:flex-col nx:gap-3">
      <Select>
        <SelectTrigger aria-label="Timezone">
          <SelectValue placeholder="Select a timezone" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="utc">UTC</SelectItem>
          <SelectItem value="est">Eastern Time</SelectItem>
          <SelectItem value="pst">Pacific Time</SelectItem>
        </SelectContent>
      </Select>
      <Select defaultValue="est">
        <SelectTrigger aria-label="Timezone">
          <SelectValue placeholder="Select a timezone" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="utc">UTC</SelectItem>
          <SelectItem value="est">Eastern Time</SelectItem>
          <SelectItem value="pst">Pacific Time</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}

Groups

'use client';

import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from '@/components/select/select';

export default function SelectGroups() {
  return (
    <Select>
      <SelectTrigger className="nx:w-[200px]" aria-label="Food">
        <SelectValue placeholder="Select a food" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Fruits</SelectLabel>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
          <SelectItem value="orange">Orange</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Vegetables</SelectLabel>
          <SelectItem value="carrot">Carrot</SelectItem>
          <SelectItem value="broccoli">Broccoli</SelectItem>
          <SelectItem value="spinach">Spinach</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
  );
}

Disabled

'use client';

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

export default function SelectDisabled() {
  return (
    <div className="nx:flex nx:w-full nx:max-w-[180px] nx:flex-col nx:gap-3">
      <Select disabled>
        <SelectTrigger aria-label="Fruit">
          <SelectValue placeholder="Disabled" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="apple">Apple</SelectItem>
          <SelectItem value="banana">Banana</SelectItem>
        </SelectContent>
      </Select>
      <Select>
        <SelectTrigger aria-label="Plan">
          <SelectValue placeholder="Disabled items" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="starter">Starter</SelectItem>
          <SelectItem value="growth" disabled>
            Growth (sold out)
          </SelectItem>
          <SelectItem value="scale">Scale</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}

Invalid

Choose a region to deploy to.

'use client';

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

export default function SelectInvalid() {
  return (
    <div className="nx:grid nx:w-[180px] nx:gap-1.5">
      <Select>
        <SelectTrigger
          aria-label="Region"
          aria-invalid
          aria-describedby="select-invalid-region-error"
        >
          <SelectValue placeholder="Select a region" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="us-east">US East</SelectItem>
          <SelectItem value="eu-west">EU West</SelectItem>
          <SelectItem value="ap-south">AP South</SelectItem>
        </SelectContent>
      </Select>
      <p
        id="select-invalid-region-error"
        className="nx:typography-body-default nx:text-error-subtle-foreground"
      >
        Choose a region to deploy to.
      </p>
    </div>
  );
}