SegmentedControl
Segmented button group selector
Import: import { SegmentedControl } from 'react-native-mantine';
Usage
import { useState } from 'react';
import { SegmentedControl } from 'react-native-mantine';
const [value, setValue] = useState('react');
<SegmentedControl
value={value}
onChange={setValue}
data={[
{ value: 'react', label: 'React' },
{ value: 'vue', label: 'Vue' },
{ value: 'svelte', label: 'Svelte' },
]}
fullWidth
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | Current selected value (controlled) | |
defaultValue | string | Default value (uncontrolled) | |
onChange | (value: string) => void | Called when value changes | |
data (required) | (string | SegmentedControlItem)[] | Data for segments | |
size | MantineSize | 'md' | SegmentedControl size |
color | MantineColor | 'blue' | SegmentedControl color |
radius | MantineNumberSize | 'sm' | Key of theme.radius or any valid value to set border-radius |
disabled | boolean | false | Disabled state |
orientation | 'horizontal' | 'vertical' | 'horizontal' | Orientation of the segments |
fullWidth | boolean | false | Sets width to 100% of parent |
transitionDuration | number | 200 | Transition duration in ms |
style | any | Additional styles | |
testID | string | Test identifier used by testing frameworks |