SegmentedControl

SegmentedControl allows to pick a value among a list of predefined options. In that it resembles a Select control or a Radio button. All options remain simultaneously on-screen , which is typical of a Radio button.

The picked option has a highlight overlay ontop. As the selected option changes, Mantine moves the overlay toward the selection with a smooth animation.

Each option comes with a label, which is the user-facing description, and a value, which is the unique identifier that represents it, and which we store in the client state. We make the value conform to a type union to prevent typos.

We store the options in data. We set the initial selection in value.

onChange is called on user selection and before browser paint. React prevents any change unless we mutate the state accordingly.

type AIProvider = "GPT" | "IMAGEN"

const [provider, setProvider] = useState<AIProvider>("GPT")

<SegmentedControl
    radius="md"
    size="sm"
    value={provider}
    bg={"transparent"}
    onChange={(v) => setProvider(v as AIProvider)}
    data={[
        { label: openAILabel, value: "GPT" },
        { label: geminiLabel, value: "IMAGEN" },
    ]}
/>