# Native select: Sizes

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

Example: https://hextaui.com/docs/native-select/examples/sizes
Component docs: https://hextaui.com/docs/native-select.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/native-select-sizes.json
```

This adds `components/examples/native-select/sizes.tsx` with the Native select component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/native-select/sizes.tsx"
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>
  )
}
```

## Props in this example

### NativeSelect

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

## More Native select examples

- [Groups](https://hextaui.com/docs/native-select/examples/groups.md)
- [Field](https://hextaui.com/docs/native-select/examples/field.md)
- [Invalid](https://hextaui.com/docs/native-select/examples/invalid.md)
- [Disabled](https://hextaui.com/docs/native-select/examples/disabled.md)
- [Controlled](https://hextaui.com/docs/native-select/examples/controlled.md)
- [Long content](https://hextaui.com/docs/native-select/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/native-select/examples/rtl.md)