Segmented control component (Radix-backed) for SFX UI
npm install @shadowfax-tech/segmented-controlA segmented control component built with Radix UI for SFX UI library.
``bash`
npm install @shadowfax-tech/segmented-control
Make sure you have the following peer dependencies installed:
`bash`
npm install react @radix-ui/react-toolbar @shadowfax-tech/sfx-ui-theme
`tsx
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 (
value={value}
onChange={setValue}
/>
);
}
`
- options: Array of options with id, label, and optional iconvalue
- : Currently selected option idonChange
- : Callback when selection changesclassName
- : Additional CSS class (optional)disabled
- : Whether the control is disabled (optional)
Import the SCSS file in your application (requires SCSS support):
`scss`
@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:
`scss``
@import '@shadowfax-tech/sfx-ui-theme/src/lib/styles';
@import '@shadowfax-tech/segmented-control/styles';