SegmentedControl

SegmentedControl allows picking a value among a set of options. The options always stay on screen (Radio button). In that it is different from a Select.

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

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

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" },
    ]}
/>