SegmentedControl Component

The SegmentedControl component is a React component designed to provide a segmented control input for selecting options. This component allows users to choose from a set of options using a visually distinct set of buttons.

Table of Contents

• Installation
• Usage
• Props
• Example
• Contributing

Installation

To use the SegmentedControl component in your React application, follow these steps:

Installation

npm install @bolttech/frontend-foundations @bolttech/atoms-segmented-control

or

yarn add @bolttech/frontend-foundations @bolttech/atoms-segmented-control

Once you have the required dependencies installed, you can start using the SegmentedControl component in your React application.

Usage

The SegmentedControl component provides a set of visually distinct buttons that allow users to select from a predefined set of options. It supports customization through various props.

To use the component, import it and include it in your JSX:

import React from 'react';
import { SegmentedControl } from '@bolttech/atoms-segmented-control';
import { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';

function App() {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <SegmentedControl
        value="option1"
        options={[
          { label: 'Option 1', value: 'option1' },
          { label: 'Option 2', value: 'option2' },
        ]}
        fullWidth={false}
        errorMessage="An error occurred"
        dataTestId="segmented-control-component"
        onChange={(selectedValue) => console.log(`Selected: ${selectedValue}`)}
      />
    </BolttechThemeProvider>
  );
}

export default App;

Props

The SegmentedControl component accepts the following props:

| Prop | Type | Description | | -------------- | -------- | --------------------------------------------------------------------------------- | | id | string | The HTML id attribute for the segmented control. | | dataTestId | string | The data-testid attribute for testing purposes. | | value | string | The currently selected option value. | | options | Option[] | An array of option objects to be displayed. | | fullWidth | boolean | Boolean representing if should take the containers full width on desktop devices. | | errorMessage | string | An optional error message to display. | | onChange | function | A callback function triggered on option change. | | onBlur | function | A callback function triggered on blur event. | | onFocus | function | A callback function triggered on focus event. |

Example

Here's an example of using the SegmentedControl component:

<SegmentedControl
  value="option1"
  options={[
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
  ]}
  fullWidth={false}
  errorMessage="An error occurred"
  dataTestId="segmented-control-component"
  onChange={(selectedValue) => console.log(`Selected: ${selectedValue}`)}
/>

This will render a SegmentedControl component with two options, the first option selected, and an error message displayed.

Contributing

Contributions to the SegmentedControl component are welcome. If you find any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request on the project's Bitbucket repository.