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
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | ||
label | string | ||
testID | string | ||
options | readonly SegmentedOption[] | ||
value | string | ||
defaultValue | string | ||
onValueChange | (value: string) => void | ||
label | string | Names the group for screen readers. | |
disabled | boolean | false | |
style | StyleProp<ViewStyle> | ||
testID | string | ||
native | boolean | Renders the real platform control when `@leoanimesh/ferrule-native` is available. |