Segmented

Segmented, a React Native component for iOS, Android and web: One choice out of a few.

Usage

import { useState } from 'react';
import { Segmented } from './components/ui/segmented';

const OPTIONS = [{ value: 'day', label: 'Day' }, { value: 'week', label: 'Week' }, { value: 'month', label: 'Month' }];

export default function Example() {
  const [range, setRange] = useState('week');
  return <Segmented label="Range" options={OPTIONS} value={range} onValueChange={setRange} style={{ maxWidth: 360 }} />;
}

Props

PropTypeDefaultDescription
valuestring
labelstring
testIDstring
optionsreadonly SegmentedOption[]
valuestring
defaultValuestring
onValueChange(value: string) => void
labelstringNames the group for screen readers.
disabledbooleanfalse
styleStyleProp<ViewStyle>
testIDstring
nativebooleanRenders the real platform control when `@leoanimesh/ferrule-native` is available.