Select Stable WINMACLNX

A controlled dropdown select that expands inline. Renders as an accordion-style list — no native popup window, so it composes naturally with the rest of your layout.

Import

import { Select } from 'veloxkit'

Basic usage

const [locale, setLocale] = useState('en')
 
<Select
  value={locale}
  onValueChange={setLocale}
  options={[
    { label: 'English', value: 'en' },
    { label: 'French',  value: 'fr' },
    { label: 'Spanish', value: 'es' },
    { label: 'German',  value: 'de' },
  ]}
/>

Props

Prop	Type	Default	Description
`value`	`string`	—	Currently selected value (required)
`onValueChange`	`(value: string) => void`	—	Called when the user picks an option
`options`	`Option[]`	—	List of options (required)
`placeholder`	`string`	`'Select…'`	Text shown when no value is selected
`disabled`	`boolean`	`false`	Prevents interaction
`width`	`number`	`200`	Width of the control
`style`	`ViewStyle`	—	Outer container style

Option shape

type Option = {
  label: string    // display text
  value: string    // the value passed to onValueChange
}

Examples

Country picker

const COUNTRIES = [
  { label: '🇺🇸 United States', value: 'US' },
  { label: '🇬🇧 United Kingdom', value: 'GB' },
  { label: '🇩🇪 Germany',        value: 'DE' },
  { label: '🇫🇷 France',         value: 'FR' },
  { label: '🇯🇵 Japan',          value: 'JP' },
]
 
const [country, setCountry] = useState('')
 
<Select
  value={country}
  onValueChange={setCountry}
  options={COUNTRIES}
  placeholder="Select country…"
  width={220}
/>

Dynamic options from database

const [tables, setTables]   = useState([])
const [selected, setSelected] = useState('')
 
useEffect(() => {
  db.query("SELECT name FROM sqlite_master WHERE type='table' ORDER BY name")
    .then(rows => setTables(rows.map(r => ({ label: r.name, value: r.name }))))
}, [])
 
<Select
  value={selected}
  onValueChange={setSelected}
  options={tables}
  placeholder="Select a table…"
  width={240}
/>

With z-index overlap

The dropdown expands inline (pushing content down) rather than floating over it. If you need it to visually overlap content below, set zIndex on the Select's container:

<View style={{ zIndex: 10 }}>
  <Select value={val} onValueChange={setVal} options={opts} />
</View>
<View style={{ zIndex: 1 }}>
  {/* Content below the select */}
</View>

Slider DatePicker