View Source

SegmentedControl

A control containing multiple buttons, only one of which can be active at a time.

SegmentedControl has many potential uses, the most common being:

  1. The controls for a tabbed view
  2. A mode switch

Essentially, it behaves like a radio group without actually using input controls. Only one option can be selected at a time.

Installation#

npm i --save boundless-segmented-control

SegmentedControl can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:

npm i boundless --save

the ES6 import statement then becomes like:

import { SegmentedControl } from 'boundless';

Demo

Which astronomical features would you like to view?


Show Implementation

Component Instance Methods#

  • getSelectedOption() retrieves the option that is selected
  • getSelectedOptionIndex() retrieves the index of the option that is selected
  • selectOption(option) allows for programmatic switching of the active SegmentedControl option
  • selectOptionByKey(key, value) allows for programmatic switching of the active SegmentedControl option using a unique key
  • selectOptionIndex(index) allows for programmatic switching of the active SegmentedControl option by index

Props#

Required Props#

NameImplementationDescription
options
Expects
arrayOf(object)
Default Value
[]

prop objects to be applied against the SegmentedControl buttons, accepts any valid React props

Example#

options={[{
    children: 'Foo',
    className: 'foo',
}, {
    children: <span>Bar</span>,
    'data-id': 'bar',
}]}
*
Expects
any

any React-supported attribute

children
Expects
any renderable

Optional Props#

NameImplementationDescription
*
Expects
any

any React-supported attribute

defaultOptionSelectedIndex
Expects
number
Default Value
0

sets the initial selected option on first mount

onOptionSelected
Expects
function
Default Value
() => {}

called when a child element becomes selected with the option and option index

optionComponent
Expects
string or function
Default Value
'button'

provide a customized component type if desired, either a HTML element name or ReactComponent