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.

Instead of explicit markup, we define the options and provide them to SegmentedControl. For each option, we provide:

• The label is the user-facing description: It is a string, or a React node, in particular when we want to add an icon.
• The value is the option's string identifier. It must conform to the type union provided at the component level.

The state holds the selected identifier. The initial value determines which option is selected at the start:

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

<SegmentedControl<AIModel>
    value={model}
    onChange={(v) => setModel(v)}
    data={[
        { label: "ChatGPT", value: "GPT" },
        { label: "Gemini", value: "GEMINI" },
    ]}
/>