104Get started
HextaUI

Native select: Long content

Long selected labels end with an ellipsis instead of running under the chevron.

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

export function NativeSelectLongContent() {
  return (
    <div className="w-56 max-w-full">
      <NativeSelect
        aria-label="Billing account"
        defaultValue="long"
        className="w-full"
      >
        <NativeSelectOption value="short">Personal</NativeSelectOption>
        <NativeSelectOption value="long">
          The International Subsidiary Billing Account for Europe and Asia
        </NativeSelectOption>
      </NativeSelect>
    </div>
  )
}

Add this example

This adds the example as components/examples/native-select/long-content.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-long-content.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–
defaultValue
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