Select

Stable

Dropdown selection component with configurable item rendering.

Installation

npm install @xaui/native

Import

import { Select, SelectItem } from '@xaui/native/select'

Basic Usage

Minimal example showing the component with its default configuration.

import { Select } from '@xaui/native/select'

export function Example() {
  return <Select />
}

Basic Select

Single-selection dropdown with a list of items.

import { Select, SelectItem } from '@xaui/native/select'

export function BasicExample() {
  return (
    <Select label="Animal" placeholder="Select an animal">
      <SelectItem value="cat" label="Cat" />
      <SelectItem value="dog" label="Dog" />
      <SelectItem value="bird" label="Bird" />
    </Select>
  )
}

Controlled Single Select

Track the selected key in state.

import { useState } from 'react'
import { Select, SelectItem } from '@xaui/native/select'

const languages = [
  { value: 'js', label: 'JavaScript' },
  { value: 'ts', label: 'TypeScript' },
  { value: 'py', label: 'Python' },
]

export function ControlledExample() {
  const [keys, setKeys] = useState<string[]>([])

  return (
    <Select
      label="Language"
      selectedKeys={keys}
      onSelectionChange={setKeys}
    >
      {languages.map(lang => (
        <SelectItem itemKey={lang.value} value={lang.value} label={lang.label} />
      ))}
    </Select>
  )
}

Multi Select

Allow selecting multiple items at once.

import { Select, SelectItem } from '@xaui/native/select'

export function MultiSelectExample() {
  return (
    <Select label="Toppings" selectionMode="multiple" placeholder="Choose toppings">
      <SelectItem value="cheese" label="Cheese" />
      <SelectItem value="tomato" label="Tomato" />
      <SelectItem value="mushroom" label="Mushroom" />
      <SelectItem value="pepper" label="Pepper" />
    </Select>
  )
}

Items with Description

Provide secondary text for each option.

import { Select, SelectItem } from '@xaui/native/select'

export function ItemDescriptionExample() {
  return (
    <Select label="Plan">
      <SelectItem value="free" label="Free" description="Up to 3 projects" />
      <SelectItem value="pro" label="Pro" description="Unlimited projects" />
      <SelectItem value="enterprise" label="Enterprise" description="Custom limits" isDisabled />
    </Select>
  )
}