Select
Select is a component component that provides select functionality.
Active
Select an option
Examples
size
Different size options for the Select component.
sm
Select an option
md
Select an option
lg
Select an option
Installation
npm install @your-design-system/selectimport {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
export function SelectDemo() {
return (
<Select>
<SelectTrigger className="w-[180px]">
<SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
<SelectItem value="apple">Apple</SelectItem>
<SelectItem value="banana">Banana</SelectItem>
<SelectItem value="blueberry">Blueberry</SelectItem>
<SelectItem value="grapes">Grapes</SelectItem>
<SelectItem value="pineapple">Pineapple</SelectItem>
</SelectContent>
</Select>
)
}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | - | The placeholder prop for the component. |
disabled | boolean | - | Whether the component is disabled. |
Styling
The component uses Tailwind CSS classes for styling. You can customize the appearance by overriding these classes.
Base Classes
flexw-fullitems-centerjustify-betweenrounded-mdborderborder-inputbg-backgroundpx-3py-2ring-offset-backgroundplaceholder:text-muted-foregroundfocus:outline-nonefocus:ring-2focus:ring-ringfocus:ring-offset-2size Variants
sm
h-8text-xsmd
h-10text-smlg
h-11text-baseDesign System Compliance
This component is validated against atomic design principles and foundation token usage.
⚠ Atomic Design Issues
Issue 1Hardcoded spacing found: px-3, py-2. Use semantic spacing tokens.
Fix these issues to ensure your component integrates properly with the design system.
On This Page