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.
To use the SegmentedControl component in your React application, follow these steps:
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.
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;
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. |
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.
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.