Single Select

Open in playground

Pick one option from a list. Supports an optional freeform note for extra context, and tapping a selected option clears it.

Preview

How are you building this product?

Pick the option that best describes your setup

↑↓to navigateEnterto selectEscto skip

Usage

import { SingleSelect } from "@/components/socratic-ui/single-select";

const [value, setValue] = useState<string | null>(null);

<SingleSelect
  question="How are you building this product?"
  options={[
    { title: "Solo founder" },
    { title: "Co-founding team" },
  ]}
  value={value}
  onChange={setValue}
/>

API Reference

Prop	Type	Default
`question`required The headline shown above the options.	`string`	`—`
`subtitle` Optional supporting copy beneath the question.	`string`	`—`
`options`required The list of selectable options.	`{ title: string; subtitle?: string }[]`	`—`
`value`required Title of the selected option (single mode), array of titles (multi mode when `allowMultiple` is set), or null.	`string \| string[] \| null`	`—`
`onChange`required Called when the selection changes. Tapping a selected option in single mode clears it.	`(value: string \| string[] \| null) => void`	`—`
`allowMultiple` When true, the component upgrades to multi-select on the second pick. `value` becomes `string[]` and the optional `multiValue` / `onMultiChange` props control the array.	`boolean`	`—`
`suggested` Soft-cap hint shown in the footer ("N suggested"). Exceeding it tints the count but does not block further selections.	`number`	`—`
`max` Hard cap on selections in multi-mode. Unselected options dim once the cap is reached.	`number`	`—`
`freeformPlaceholder` Renders an extra textarea beneath the options. Defaults to "Any extra context…"; pass `false` to hide.	`string \| false`	`—`
`freeformValue` Controlled value for the freeform textarea.	`string`	`—`
`onFreeformChange` Controlled setter for the freeform textarea.	`(value: string) => void`	`—`
`iconLayout` How icons align relative to their label. `vertical` stacks icon above label for a tile-style layout.	`"horizontal" \| "vertical"`	`"horizontal"`
`iconAlignment` Horizontal alignment of the icon within its slot. Only applies when `iconLayout` is `"vertical"`.	`"left" \| "center"`	`"left"`
`motion` Opt-in entrance animation config. Omit for static rendering; pass `{ enabled: true }` (or a preset from `motion.ts`) to animate in on mount.	`SocraticMotion`	`—`