import "./choice_list.css"; import type * as React from "react"; import { useRender } from "@base-ui/react/use-render"; import { type StyleProps } from "./style_props"; export interface ChoiceOption { label: string; value: string; /** An optional second line under the label. */ description?: string; } export interface ChoiceListProps extends StyleProps { options: ChoiceOption[]; /** The chosen value — an option's `value`, or (with `allowCustom`) the free * TEXT of an "Other" answer. `undefined` = nothing chosen. */ value?: string; onSelect: (value: string) => void; /** Show an always-visible inline free-text field at the bottom for a custom * answer — typing it IS the selection. Its text IS the value (any `value` not * matching an option reads as the custom answer, so the caller distinguishes a * custom answer by "not in `options`"). */ allowCustom?: boolean; /** Names the option GROUP — the question it answers. Announced before the * options are stepped through; pass the question a `ClarifyWizard` step is asking. */ accessibilityLabel: string; testID?: string; ref?: React.Ref; render?: useRender.RenderProp; } /** * A vertical set of selectable answer options — divider-separated rows (no * bordered cards), each with its own focus ring + hover wash, single-select and * freely switchable (pick a different option any time). The chosen row shows a * check. Every "pick one" where the whole set is worth showing: a form's radio * set, a wizard step, and the agent's quick-reply surface (`ClarifyWizard` * uses it). With `allowCustom`, an always-visible inline * free-text field at the bottom captures an answer the set does not offer — * typing it IS the selection. * * The options are a Base UI radio group, so they are ONE tab stop with the * arrows moving between them and each announcing `aria-checked`. */ export declare function ChoiceList({ options, value, onSelect, allowCustom, accessibilityLabel, testID, render, ref, ...props }: ChoiceListProps): React.ReactElement>;