@bolttech/atoms-segmented-control v0.19.0

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:

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.