Segmented Control

Last updated: 3.0.0 (04/07/2024)

The Segmented Control is an input component that allows users to select one option from a set of mutually exclusive options. It presents options as a row of buttons within a styled container.

Usage

import { SegmentedControl } from "@valence-ui/core";
import { useState } from "react";

function MyComponent() { 
    const [value, setValue] = useState("option1");

    return ( 
        <SegmentedControl
            value={value}
            setValue={setValue}
            options={["option1", "option2", "option3"]}
        />
    )
}

Custom labels

By default, the option value will be used as the label. To provide custom labels, use the object form:

import { SegmentedControl } from "@valence-ui/core";
import { useState } from "react";

function MyComponent() { 
    const [value, setValue] = useState("sm");

    return ( 
        <SegmentedControl
            value={value}
            setValue={setValue}
            options={[
                { value: "sm", label: "Small" },
                { value: "md", label: "Medium" },
                { value: "lg", label: "Large" },
            ]}
        />
    )
}

Custom label components

Labels can also be React nodes, allowing for icons or other custom content:

import { SegmentedControl, Icon } from "@valence-ui/core";
import { IconList, IconLayoutGrid } from "@tabler/icons-react";
import { useState } from "react";

function MyComponent() { 
    const [value, setValue] = useState("list");

    return ( 
        <SegmentedControl
            value={value}
            setValue={setValue}
            options={[
                { value: "list", label: <Icon><IconList /></Icon> },
                { value: "grid", label: <Icon><IconLayoutGrid /></Icon> },
            ]}
        />
    )
}

Styling

import { SegmentedControl } from "@valence-ui/core";
import { useState } from "react";

function MyComponent() { 
    const [value, setValue] = useState("option1");

    return ( 
        <SegmentedControl
            value={value}
            setValue={setValue}
            options={["option1", "option2", "option3"]}
            
            variant="filled"
            size="md"
            radius="md"
            color="primary"
            equalWidth={true}
        />
    )
}

Props

Extends GenericInputProps<string> and StyledFlexProps.

Property

Type

Description

options (required)

SegmentedControlOption[]

A list of options to supply for the content of this input.

onSelect

(value: SegmentedControlOption) => void

Callback to be called when an option is selected.

equalWidth

boolean

Whether every option should have an equal width. Defaults to true.

buttonProps

PrimitiveButtonProps

Optional props to pass to the child button components.