SingleSelect

Radio-button style selection list. Stores the selected value under answers.<responseKey> and optionally auto-advances to the next page.

Props

Prop	Type	Default	Description
`responseKey`	`string`	—	The response key used to store the selected value (saved as `answers.*`)
`options`	`T[]`	—	Array of option objects
`keyExtractor`	`(item: T, index: number) => string`	—	Extract a unique string value from each option. Falls back to `item.value` or the index.
`renderItem`	`(info: { item: T; index: number; active: boolean }) => ReactNode`	—	Render each option. `active` is `true` when selected.
`autoAdvance`	`boolean`	`true`	Automatically navigate to the next page on selection
`autoAdvanceDelay`	`number`	`200`	Delay in ms before auto-advancing
`clickAnimation`	`'none' \| 'shrink' \| 'grow'`	`'none'`	Tap/click animation style applied to each option
`className`	`string`	—	Container className

Example


import { SingleSelect } from '@appfunnel-dev/sdk/elements'
 
const goals = [
  { id: 'profit', label: 'Make a profit' },
  { id: 'hobby', label: 'Just a hobby' },
]
 
export default function GoalPage() {
  return (
    <SingleSelect
      options={goals}
      responseKey="goal"
      keyExtractor={(item) => item.id}
      renderItem={({ item, active }) => (
        <div className={active ? 'border-blue-500 border-2' : 'border-gray-200 border'}>
          {item.label}
        </div>
      )}
    />
  )
}