SegmentedControl

Pick a value among a set of options. The options always stay on screen (radio button).

The selected option is highlighted with an overlay. As we change the selection, Mantine moves the overlay with an animation.

We describe the options in data:

• The option's label is the user-facing description: It is a string or a React node.
• The option's value is its identifier. The state holds this identifier when the option is selected. A type union lists the possible identifiers.

We set the initial selection in value.

onChange is called on selection change attempt. The selection changes only if we mutate the state.

type AIModel = "GPT" | "IMAGEN"
const [model, setModel] = useState<AIModel>("GPT")

<SegmentedControl<AIModel>
    value={model}
    onChange={(v) => setModel(v)}
    data={[
        { label: GPTLabel, value: "GPT" },
        { label: IMAGENLabel, value: "IMAGEN" },
    ]}
    // size="sm"
    // radius="md"
    // bg={"transparent"}
/>