Components

Segmented Control

A segmented control component that allows users to select one or multiple options from a set of segments.

Selected: Weekly

tsx


    <SegmentedControl
        segments={['Daily', 'Weekly', 'Monthly']}
        defaultIndex={1}
        onSegmentChange={(segment) => console.log(segment)}
        className="mx-auto"
        activeClassName="bg-zinc-900 text-gray-50"
        inactiveClassName="bg-zinc-200 text-gray-700"
        multiple={false}
    />

Props

Name	Type	Default	Description
segments	string[]	-	The list of segments to display.
onSegmentChange	(selectedSegment: string[] \| string) => void	-	Callback function that is triggered when the segment is changed.
defaultIndex	number \| number[]	0	The index (or indices) of the default selected segment(s).
multiple	boolean	false	If true, allows selecting multiple segments.
className	string	-	Additional class names for the control container.
activeClassName	string	-	Class name for the active segment.
inactiveClassName	string	-	Class name for the inactive segments.

Best Practices

Use Segmented Control when options are closely related and mutually exclusive.
Ensure segment labels are concise and clearly represent the options.
Consider using the multiple selection option only when necessary to avoid confusion.