@shadowfax-tech/segmented-control

A segmented control component built with Radix UI for SFX UI library.

Installation

npm install @shadowfax-tech/segmented-control

Peer Dependencies

Make sure you have the following peer dependencies installed:

npm install react @radix-ui/react-toolbar @shadowfax-tech/sfx-ui-theme

Usage

import { SegmentedControl } from '@shadowfax-tech/segmented-control';
import '@shadowfax-tech/segmented-control/styles'; // Import styles

const options = [
  { id: 'option1', label: 'Option 1' },
  { id: 'option2', label: 'Option 2' },
  { id: 'option3', label: 'Option 3' },
];

function App() {
  const [value, setValue] = React.useState('option1');

  return (
    <SegmentedControl
      options={options}
      value={value}
      onChange={setValue}
    />
  );
}

Props

• options: Array of options with id, label, and optional icon
• value: Currently selected option id
• onChange: Callback when selection changes
• className: Additional CSS class (optional)
• disabled: Whether the control is disabled (optional)

Styles

Import the SCSS file in your application (requires SCSS support):

@import '@shadowfax-tech/segmented-control/styles';

Note: This component requires @shadowfax-tech/sfx-ui-theme for theming variables. Make sure to import the theme styles first:

@import '@shadowfax-tech/sfx-ui-theme/src/lib/styles';
@import '@shadowfax-tech/segmented-control/styles';