104Get started
HextaUI

Native select: Invalid

Set aria-invalid and link the message with aria-describedby.

We don't ship to the selected region yet.

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

export function NativeSelectInvalid() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <NativeSelect
        aria-label="Country"
        aria-invalid
        aria-describedby="native-select-invalid-message"
        className="w-full"
      >
        <NativeSelectOption value="">Select a country</NativeSelectOption>
        <NativeSelectOption value="in">India</NativeSelectOption>
        <NativeSelectOption value="de">Germany</NativeSelectOption>
      </NativeSelect>
      <p
        id="native-select-invalid-message"
        className="text-sm text-destructive"
      >
        We don&apos;t ship to the selected region yet.
      </p>
    </div>
  )
}

Add this example

This adds the example as components/examples/native-select/invalid.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-invalid.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
classNameApplied to the wrapper, so it sizes the whole control.
string–

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