@bolttech/atoms-segmented-control

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.