Client component

Native Select

A styled native <select>. The dropdown, keyboard handling, typeahead and mobile pickers are the platform's own: no popup re-implementation. Reach for Select when options need custom rendering; reach for this when they don't.

import { NativeSelect, Box } from "astralis-ui";

export function NativeSelectDemo() {
  return (
    <Box w="full" maxW="xs">
      <NativeSelect placeholder="Pick a framework" aria-label="Framework">
        <option value="next">Next.js</option>
        <option value="remix">Remix</option>
        <option value="vite">Vite</option>
        <option value="astro">Astro</option>
      </NativeSelect>
    </Box>
  );
}

size

variant

placeholder

invaliddisabled

import { NativeSelect } from "astralis-ui";

<NativeSelect
  aria-label="Region"
>
  <option value="eu">Europe</option>
  <option value="us">United States</option>
  <option value="apac">Asia Pacific</option>
</NativeSelect>

Import#

import { NativeSelect } from "astralis-ui";

Variants and states#

The chrome mirrors Input's outline/filled taxonomy:

import { NativeSelect, VStack } from "astralis-ui";

export function NativeSelectVariants() {
  return (
    <VStack gap="4" w="full" maxW="xs" alignItems="stretch">
      <NativeSelect variant="outline" defaultValue="outline" aria-label="Outline variant">
        <option value="outline">Outline (default)</option>
      </NativeSelect>
      <NativeSelect variant="filled" defaultValue="filled" aria-label="Filled variant">
        <option value="filled">Filled</option>
      </NativeSelect>
      <NativeSelect invalid defaultValue="invalid" aria-label="Invalid state">
        <option value="invalid">Invalid</option>
      </NativeSelect>
      <NativeSelect disabled defaultValue="disabled" aria-label="Disabled state">
        <option value="disabled">Disabled</option>
      </NativeSelect>
    </VStack>
  );
}

With Field#

Inside a Field, id, describedBy, invalid and disabled are inherited automatically, like every other data-entry component.

Props#

Everything a native <select> accepts passes through. On top of that:

Prop	Type	Default	Description
`children`	`ReactNode`	None	Native option and optgroup elements.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Field height, matching Input.
`variant`	`"outline" \| "filled"`	`"outline"`	Field chrome, matching Input.
`placeholder`	`string`	None	A disabled empty option shown until a value is chosen.
`invalid`	`boolean`	`false`	Error styling and aria-invalid. Inherited inside a Field.
`disabled`	`boolean`	`false`	Blocks interaction. Inherited inside a Field.