104Get started
HextaUI

Native select: Sizes

Sizes, borders, focus rings and invalid styles match Input exactly, so the two line up in a row.

import { Input } from "@/components/ui/input"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"

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

export function NativeSelectSizes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {sizes.map((size) => (
        <div key={size} className="flex gap-2">
          <Input
            size={size}
            placeholder={`Input ${size}`}
            aria-label={`Input ${size}`}
          />
          <NativeSelect size={size} aria-label={`Select ${size}`}>
            <NativeSelectOption value="">{size}</NativeSelectOption>
            <NativeSelectOption value="a">Option A</NativeSelectOption>
          </NativeSelect>
        </div>
      ))}
    </div>
  )
}

Add this example

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

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

To add only the component, follow the Native select installation.

Props in this example

The Native select props this example sets, from the API reference.

NativeSelect

PropTypeDefault
size
"sm" | "default" | "lg""default"

Every prop is in the Native select API reference.

More Native select examples

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

Related components