Components
SegmentedControl
WEB APPROXIMATION — on iOS this renders the platform's native segmented control (@react-native-segmented-control/segmented-control); what you see here is the Material fallback built from Button/Text.
Check the iOS look on a simulator before signing off on it.
This example is composed with Storybook args. Open the interactive workbench to change its props and inspect the generated API controls.
Import
import { SegmentedControl } from '@simal/ui/nativewindui';Props
| Prop | Values | Default | Description |
|---|---|---|---|
values | — | ["Day","Week","Month"] | The segment labels. Two to four reads well; beyond that the segments get too narrow to hit. |
selectedIndex | — | — | Index of the active segment. Controlled — read onIndexChange and store it, or the selection snaps back. |
onIndexChange | — | — | Fires with the new index. On iOS this is the native control, so the change lands before your handler runs. |
enabled | boolean | true | False dims the whole control. There is no per-segment disable. |
Examples
Interactive
{
function Controlled() {
const [index, setIndex] = React.useState(0);
return (
<View className="gap-4">
<SegmentedControl {...args} selectedIndex={index} onIndexChange={setIndex} />
<Text variant="footnote" color="tertiary">
Showing:
{' '}
{args.values[index]}
</Text>
</View>
);
}
return <Controlled />;
}Disabled
Two Segments
<SegmentedControl
values={['Pending', 'Approved']}
selectedIndex={1}
/>