Primitives
Select
Accessible select component built on Radix Select.
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@pipecat-ai/voice-ui-kit";
<Select>
<SelectTrigger>
<SelectValue placeholder="Please select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="item-1">Select Item 1</SelectItem>
<SelectItem value="item-2">Select Item 2</SelectItem>
<SelectItem value="item-3">Select Item 3</SelectItem>
</SelectContent>
</Select>| Prop | Type | Default |
|---|---|---|
Select? | React.ComponentProps<typeof SelectPrimitive.Root> | {} |
variant? | "primary" | "outline" | "ghost" | "outline" |
size? | "sm" | "md" | "lg" | "xl" | "md" |
align? | "left" | "center" | "right" | "left" |
rounded? | "size" | "none" | "sm" | "md" | "lg" | "xl" | "full" | "size" |
Usage
With Guide
import { Select, SelectTrigger, SelectGuide, SelectValue, SelectContent, SelectItem } from "@pipecat-ai/voice-ui-kit";
<Select>
<SelectTrigger>
<SelectGuide>Select</SelectGuide>
<SelectValue placeholder="Please select" />
</SelectTrigger>
<SelectContent>
<SelectItem value="item-1">Select Item 1</SelectItem>
<SelectItem value="item-2">Select Item 2</SelectItem>
<SelectItem value="item-3">Select Item 3</SelectItem>
</SelectContent>
</Select>Alignment
import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@pipecat-ai/voice-ui-kit";
<div className="flex flex-row gap-4 w-full justify-center">
<Select>
<SelectTrigger align="left" className="w-full">
<SelectValue placeholder="Left" />
</SelectTrigger>
<SelectContent>
<SelectItem value="item-1">Select Item 1</SelectItem>
<SelectItem value="item-2">Select Item 2</SelectItem>
<SelectItem value="item-3">Select Item 3</SelectItem>
</SelectContent>
</Select>
<Select>
<SelectTrigger align="center" className="w-full">
<SelectValue placeholder="Center" />
</SelectTrigger>
<SelectContent>
<SelectItem value="item-1">Select Item 1</SelectItem>
<SelectItem value="item-2">Select Item 2</SelectItem>
<SelectItem value="item-3">Select Item 3</SelectItem>
</SelectContent>
</Select>
<Select>
<SelectTrigger align="right" className="w-full">
<SelectValue placeholder="Right" />
</SelectTrigger>
<SelectContent>
<SelectItem value="item-1">Select Item 1</SelectItem>
<SelectItem value="item-2">Select Item 2</SelectItem>
<SelectItem value="item-3">Select Item 3</SelectItem>
</SelectContent>
</Select>
</div>