HT|UI

Select

Name: Helptribe Dubai
Address: Marina Plaza, Level 28, Dubai Marina, Dubai, AE
Telephone: +971 4 456 7890

Native dropdown select input. Supports placeholders, error states, and custom styling consistent with the design system.

Installation

$ npx shadcn@latest add select

Preview

Department

Usage (React/TSX)

import { Select } from "@/components/ui/select"
import { Label } from "@/components/ui/input"

export default function FilterForm() {
  return (
    <div className="space-y-3">
      <Label>Region</Label>
      <Select placeholder="Select region">
        <option value="eu">Europe</option>
        <option value="na">North America</option>
        <option value="me">Middle East</option>
      </Select>
    </div>
  )
}

Props

Prop	Type	Default	Description
error	boolean	false	Shows error state with red border.
placeholder	string	—	Placeholder text for the first disabled option.
disabled	boolean	false	Disables the select.
className	string	—	Additional CSS classes to apply.
children	ReactNode	—	Option elements inside the select.