Components

Component

SegmentedControl

Single-choice segmented control for instant filtering or view switching.

ReactReact Native6 props
PreviewReact

Imports

import { SegmentedControl, SegmentedControlItem } from "@hozorica/hods-react/segmented-control";
import { SegmentedControl, SegmentedControlItem } from "@hozorica/hods-react-native/segmented-control";

Props

PropTypeDescription
value / defaultValuestringControlled and uncontrolled selected item.
onValueChange(value) => voidCalled when selected item changes.
disabledbooleanDisables the whole control or one item.
name / formstringWeb radio input form attributes.
notificationbooleanShows a notification dot on an item.
inputProps / rootRefInput props / RefWeb-only escape hatches for item internals.

Platform Support

React

Radio-backed segmented control with controlled/uncontrolled value, notification dot, disabled and invalid item states.

React Native

Pressable segmented control with matching value API.

Usage

<SegmentedControl defaultValue="Hot" aria-label="Sort by"><SegmentedControlItem value="Hot">Hot</SegmentedControlItem></SegmentedControl>

Notes

  • Provide value or defaultValue.
  • Use for immediate filtering or view switching, not long option lists.