Select

Use Select for a styled single-choice list.

Quick Preview

Preset Examples

Code

<SelectTrigger variant="default" size="md" />
<SelectTrigger variant="filled" size="sm" />
<SelectTrigger variant="ghost" size="lg" />
<SelectTrigger variant="flushed" size="md" />
 
<SelectContent variant="default">...</SelectContent>
<SelectContent variant="elevated">...</SelectContent>
<SelectContent variant="soft">...</SelectContent>

Interactive Playground

Value: starter

Code

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@altech-ui/react";

export function Example() {
  return (
    <Select defaultValue="starter">
      <SelectTrigger variant="filled">
        <SelectValue placeholder="Choose plan" />
      </SelectTrigger>
      <SelectContent variant="elevated">
        <SelectItem value="starter">Starter</SelectItem>
        <SelectItem value="pro">Pro</SelectItem>
        <SelectItem value="enterprise">Enterprise</SelectItem>
      </SelectContent>
    </Select>
  );
}

Usage

Code

import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@altech-ui/react"
 
<Select>
  <SelectTrigger variant="filled">
    <SelectValue placeholder="Choose plan" />
  </SelectTrigger>
  <SelectContent variant="elevated">
    <SelectItem value="starter">Starter</SelectItem>
    <SelectItem value="pro">Pro</SelectItem>
  </SelectContent>
</Select>

Props

Select: Radix Select Root props
SelectTrigger.variant?: default | filled | ghost | flushed
SelectTrigger.size?: sm | md | lg
SelectContent.variant?: default | elevated | soft
SelectTrigger: Radix Select Trigger props
SelectContent: Radix Select Content props
SelectItem: Radix Select Item props