Select: Sizes

size on SelectTrigger matches Input and Button heights.

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const sizes = ["sm", "default", "lg"] as const

export function SelectSizes() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {sizes.map((size) => (
        <Select key={size} defaultValue="week">
          <SelectTrigger size={size} aria-label={`Range (${size})`}>
            <SelectValue />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="day">Today</SelectItem>
            <SelectItem value="week">This week</SelectItem>
            <SelectItem value="month">This month</SelectItem>
          </SelectContent>
        </Select>
      ))}
    </div>
  )
}

Add this example

This adds the example as components/examples/select/sizes.tsx, together with the Select component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/select-sizes.json

To add only the component, follow the Select installation.

Props in this example

The Select props this example sets, from the API reference.

Select

Prop	Type	Default
`defaultValue`	`Value \| Value[] \| null`	`–`

SelectTrigger

Prop	Type	Default
`size`	`"sm" \| "default" \| "lg"`	`"default"`

SelectItem

Prop	Type	Default
`value`	`Value`	`–`

Every prop is in the Select API reference.

More Select examples

See them all, with keyboard support and accessibility notes, on the Select page.