npx shadcn@latest add https://shuip.plvo.dev/r/tsf-select-field.json

Preview

Dropdowns present a list of options in a compact UI. SelectField uses Radix UI's Select primitive wrapped with TanStack Form state management. The options prop accepts a Record<string, string> where keys are the display labels and values are what gets stored in the form state.

This format makes it simple to define options inline or map from API responses. For dependent selects (e.g., country → states), use useStore to watch one field and update another field's options dynamically with setFieldValue.

Built-in features

• Record-based options for clean label/value mapping
• Dynamic options via state or API data
• Dependent selects with form.useStore and setFieldValue
• Empty state placeholder via placeholder prop

Options format

const options = {
  'Display Label 1': 'value1',
  'Display Label 2': 'value2',
}

<SelectField
  form={form}
  name='choice'
  options={options}
  label='Select an option'
  placeholder='Choose...'
/>

Dependent selects

const [states, setStates] = React.useState<Record<string, string>>({})

// Watch country changes
form.useStore((state) => state.values.country, {
  onChange: (country) => {
    setStates(country === 'us' ? { 'California': 'ca', 'Texas': 'tx' } : {})
    form.setFieldValue('state', '') // Reset state field
  }
})

<SelectField form={form} name='country' options={{ 'United States': 'us' }} label='Country' />
<SelectField form={form} name='state' options={states} label='State' placeholder='Select country first' />

Examples

Props