react-native-ui-lib/src/components/segmentedControl/segmentedControl.api.json

[](https://stand-with-ukraine.pp.ua)

{
  "name": "SegmentedControl",
  "category": "form",
  "description": "SegmentedControl component for toggling two values or more",
  "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/SegmentedControlScreen.tsx",
  "images": [],
  "props": [
    {
      "name": "segments",
      "type": "SegmentedControlItemProps",
      "description": "Array on segments"
    },
    {
      "name": "activeColor",
      "type": "string",
      "description": "The color of the active segment label"
    },
    {
      "name": "onChangeIndex",
      "type": "(index: number) => void",
      "description": "Callback for when index has change."
    },
    {
      "name": "initialIndex",
      "type": "number",
      "description": "Initial index to be active"
    },
    {
      "name": "borderRadius",
      "type": "number",
      "description": "The segmentedControl borderRadius"
    },
    {
      "name": "backgroundColor",
      "type": "string",
      "description": "The background color of the inactive segments"
    },
    {
      "name": "activeBackgroundColor",
      "type": "string",
      "description": "The background color of the active segment"
    },
    {
      "name": "outlineColor",
      "type": "string",
      "description": "The color of the active segment outline"
    },
    {
      "name": "outlineWidth",
      "type": "number",
      "description": "The width of the active segment outline"
    },
    {
      "name": "iconOnRight",
      "type": "boolean",
      "description": "Should the icon be on right of the label"
    },
    {
      "name": "throttleTime",
      "type": "number",
      "description": "Trailing throttle time of changing index in ms."
    },
    {
      "name": "segmentsStyle",
      "type": "ViewStyle",
      "description": "Additional style for the segments"
    },
    {
      "name": "containerStyle",
      "type": "ViewStyle",
      "description": "Additional spacing styles for the container"
    },
    {
      "name": "style",
      "type": "ViewStyle",
      "description": "Custom style to inner container"
    },
    {
      "name": "segmentLabelStyle",
      "type": "TextStyle",
      "description": "Segment label style"
    },
    {
      "name": "testID",
      "type": "string",
      "description": "Component test id"
    },
    {
      "name": "label",
      "type": "string",
      "description": "SegmentedControl label"
    },
    {
      "name": "labelProps",
      "type": "TextProps",
      "description": "Pass props for the SegmentedControl label"
    },
    {
      "name": "preset",
      "type": "SegmentedControlPreset",
      "description": "Preset of the SegmentedControl [default, form]"
    }
  ],
  "snippet": [
    "<View flex padding-s5 gap-s4>",
    "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]}/>",
    "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]} preset='form'/>",
    "<SegmentedControl segments={[{label: '1st'}, {label: '2nd'}, {label: '3rd'}]} borderRadius={12} outlineColor={Colors.yellow30} outlineWidth={3} activeColor={Colors.yellow20}/>",
    "</View>"
  ],
  "docs": {
    "hero": {
      "title": "SegmentedControl",
      "description": "A segmented control is a linear set of two or more segments.Segmented control is often used to display and switch between different views.",
      "type": "hero",
      "layout": "horizontal",
      "content": [
        {
          "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SegmentedControl/segmentedControl_cover.png"
        }
      ]
    },
    "tabs": [
      {
        "title": "Overview",
        "sections": [
          {
            "type": "section",
            "content": [
              {
                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=371-20817&embed-host=share"
              }
            ],
            "title": "Usage Examples"
          },
          {
            "type": "table",
            "columns": ["Property", "Preview"],
            "items": [
              {
                "title": "Default",
                "description": "Best suitable as a main feature of the screen, mainly used for filtering or changing views within a screen.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SegmentedControl/segmentedControl_style_default.png"
                  }
                ]
              },
              {
                "title": "Form",
                "description": "Suitable for form or settings screens, matches with other related components such as textField, Picker and others.  \n    preset=\"form\"",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SegmentedControl/segmentedControl_style_form.png"
                  }
                ]
              }
            ],
            "title": "Style"
          },
          {
            "type": "table",
            "columns": ["Property", "Preview"],
            "items": [
              {
                "title": "Full width",
                "description": "The component stretches to the width of the screen.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SegmentedControl/segmentedControl_layout_fullwidth.png"
                  }
                ]
              },
              {
                "title": "Hug content",
                "description": "The components stretches according to the width of the labels.",
                "content": [
                  {
                    "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SegmentedControl/segmentedControl_style_form.png"
                  }
                ]
              }
            ],
            "title": "Layout"
          },
          {
            "type": "section",
            "layout": "horizontal",
            "title": "Segments Amount",
            "description": "Segmented Control has at least 2, and up to 4 values. a single value always have to be selected.",
            "content": [
              {
                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=371-25696&embed-host=share"
              }
            ]
          },
          {
            "type": "section",
            "layout": "horizontal",
            "title": "Content Options",
            "description": "Segmented Control has at least 2, and up to 4 values. a single value always have to be selected.",
            "content": [
              {
                "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=371-25738&embed-host=share"
              }
            ]
          },
          {
            "type": "list",
            "items": [
              {
                "title": "Default style",
                "content": [
                  {
                    "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=371-25795&embed-host=share"
                  }
                ]
              },
              {
                "title": "Form style",
                "content": [
                  {
                    "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=371-25831&embed-host=share"
                  }
                ]
              }
            ],
            "title": "Spec",
            "layout": "horizontal"
          }
        ]
      },
      {
        "title": "UX Guidelines",
        "sections": [
          {
            "type": "section",
            "layout": "horizontal",
            "title": "Accessory Label",
            "description": "Text label is optional and can be enabled when required, yet not recommended in this style.",
            "content": [
              {
                "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components%20Docs/SegmentedControl/segmentedControl_accessoryLabel.png"
              }
            ]
          }
        ]
      }
    ]
  }
}