Fluxo UIFluxo UIv0.4.1

SelectButton

A grouped button component for single or multiple selection. Perfect for toggle groups, filters, and segmented controls.

Basic Usage

Single Selection

Selected: option2
Basic Example
import { SelectButton } from 'fluxo-ui';

function MyComponent() {
  const [value, setValue] = useState('option2');

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

  return (
    <SelectButton
      items={options}
      value={value}
      onChange={(e) => setValue(e.value)}
    />
  );
}

Multiple Selection

Multiple Selection Mode

Selected: option2, option3
const [value, setValue] = useState<string[]>(['option2', 'option3']);

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

<SelectButton
  items={options}
  value={value}
  onChange={(e) => setValue(e.value)}
  multiple
/>

Vertical Direction

Vertical Layout

<SelectButton
  items={options}
  value={value}
  onChange={(e) => setValue(e.value)}
  direction="vertical"
/>

With Icons

Buttons with Icons

const HeartIcon = (props) => (
  <svg {...props}>
    {/* icon path */}
  </svg>
);

const options = [
  { label: 'Heart', value: 'heart', icon: HeartIcon },
  { label: 'Star', value: 'star', icon: StarIcon },
  { label: 'Fire', value: 'fire', icon: FireIcon },
];

<SelectButton
  items={options}
  value={value}
  onChange={(e) => setValue(e.value)}
/>

Disabled State

Fully Disabled

<SelectButton
  items={options}
  value={value}
  onChange={(e) => setValue(e.value)}
  disabled
/>

Disabled Individual Items

Specific Items Disabled

const options = [
  { label: 'Available', value: 'available' },
  { label: 'Disabled', value: 'disabled', disabled: true },
  { label: 'Also Available', value: 'available2' },
];

<SelectButton
  items={options}
  value={value}
  onChange={(e) => setValue(e.value)}
/>

Size Variants

Different Sizes

Small
Medium (default)
Large
<SelectButton items={options} value={value} size="sm" />
<SelectButton items={options} value={value} size="md" />
<SelectButton items={options} value={value} size="lg" />

Theme Variants

Different Themes

Primary
Success
Secondary
<SelectButton items={options} value={value} theme="primary" />
<SelectButton items={options} value={value} theme="success" />
<SelectButton items={options} value={value} theme="secondary" />

Real-World Examples

View Switcher

Text Alignment

// View Switcher
<SelectButton
  items={[
    { label: 'Grid', value: 'grid', icon: GridIcon },
    { label: 'List', value: 'list', icon: ListIcon },
  ]}
  value={viewMode}
  onChange={(e) => setViewMode(e.value)}
/>

// Text Alignment
<SelectButton
  items={[
    { label: 'Left', value: 'left', icon: AlignLeftIcon },
    { label: 'Center', value: 'center', icon: AlignCenterIcon },
    { label: 'Right', value: 'right', icon: AlignRightIcon },
  ]}
  value={alignment}
  onChange={(e) => setAlignment(e.value)}
/>

Import

import { SelectButton } from 'fluxo-ui';

Props

itemsreq
ListItem[]

Array of items to display. Each item has { value: any, label: any, disabled?: boolean, icon?: IconComponent | ReactElement }

value
T | T[]

Selected value(s). Single value for single selection, array of values for multiple selection

onChange
(event: ComponentEvent<T>) => void

Callback fired when selection changes. Receives ComponentEvent with the new value

multiple
boolean"false"

Enable multiple selection mode. When true, value should be an array

required
boolean"false"

Mark the field as required (affects hidden input)

direction
'horizontal' | 'vertical'"'horizontal'"

Layout direction of the button group

disabled
boolean"false"

Disable all buttons in the group

className
string

Additional CSS classes for the container

name
string

Name attribute for the hidden input field (useful for form submissions)

size
'sm' | 'md' | 'lg' | 'xl'

Size variant (inherited from BaseComponentProps)

theme
'default' | 'primary' | 'secondary' | 'success' | 'dark'

Theme variant (inherited from BaseComponentProps)

borderRadius
string

Custom border radius (inherited from BaseComponentProps)

borderColor
string

Custom border color (inherited from BaseComponentProps)

borderWidth
string

Custom border width (inherited from BaseComponentProps)

backgroundColor
string

Custom background color (inherited from BaseComponentProps)

fontSize
string

Custom font size (inherited from BaseComponentProps)

fontColor
string

Custom font color (inherited from BaseComponentProps)

Usage Notes

ListItem Structure

Each item in the items array should have:

  • value: The value to use when selected
  • label: The display text
  • disabled: (optional) Disable this specific item
  • icon: (optional) Icon component or element to display

Multiple Selection

When multiple={true}, the value prop should be an array of selected values. Users can select/deselect multiple items.

Hidden Input

SelectButton includes a hidden input field for form submissions. The name prop sets the input's name attribute. For multiple selection, values are comma-separated.

Accessibility

The component uses proper ARIA attributes (role="group",aria-pressed) for screen reader support.

Features

Single & Multi Select

Supports both single and multiple selection modes via the multiple prop

Icon Support

Each item can include an icon component displayed alongside the label

Directional Layout

Horizontal (default) or vertical layout via the direction prop

Size Variants

sm, md, lg, xl sizes to fit any context or density requirement

Granular Disable

Disable the entire group or individual items via the disabled property

Form Integration

Built-in hidden input with name prop support for native form submissions

Accessibility

Uses role="group" and aria-pressed attributes for full screen reader support

Theming

Full dark/light and 5 brand themes via CSS variables — zero extra config