Design System Builder

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/select
import {
  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

PropTypeDefaultDescription
placeholderstring-

The placeholder prop for the component.

disabledboolean-

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-2

size Variants

sm

h-8text-xs

md

h-10text-sm

lg

h-11text-base

Design System Compliance

This component is validated against atomic design principles and foundation token usage.