") center/100% no-repeat;border-color:#000;}.b-checkbox.b-checkbox-checked[disabled]{background:#3d8feb url("data:image/svg+xml;utf8, ") center/100% no-repeat;border-color:#000;cursor:not-allowed;opacity:.3}.b-checkbox.b-checkbox-checked:focus{background:#1671d7 url("data:image/svg+xml;utf8, ") center/100% no-repeat;border-color:#000}.b-checkbox.b-checkbox-checked:hover{background:#1671d7 url("data:image/svg+xml;utf8, ") center/100% no-repeat;border-color:#000}.b-checkbox.b-checkbox-mixed{background:#3d8feb linear-gradient(to bottom, #3d8feb 0%, #3d8feb calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #3d8feb calc(50% + 1px), #3d8feb 100%) center / 50% 50% no-repeat;border-color:#000;}.b-checkbox.b-checkbox-mixed[disabled]{background:#3d8feb linear-gradient(to bottom, #3d8feb 0%, #3d8feb calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #3d8feb calc(50% + 1px), #3d8feb 100%) center / 50% 50% no-repeat;border-color:#000;cursor:not-allowed;opacity:.3}.b-checkbox.b-checkbox-mixed:focus{background:#1671d7 linear-gradient(to bottom, #1671d7 0%, #1671d7 calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #1671d7 calc(50% + 1px), #1671d7 100%) center / 50% 50% no-repeat;border-color:#000}.b-checkbox.b-checkbox-mixed:hover{background:#1671d7 linear-gradient(to bottom, #1671d7 0%, #1671d7 calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #1671d7 calc(50% + 1px), #1671d7 100%) center / 50% 50% no-repeat;border-color:#000}.b-dialog-wrapper{line-height:0;position:absolute;top:0;left:0;z-index:9999}.b-dialog{background:#fff;border:1px solid transparent;border-radius:2px;box-shadow:1px 2px 3px transparent;color:#111;line-height:1.5;padding:1.5rem;}.b-dialog *:last-child{margin-bottom:0}.b-text{white-space:nowrap}.b-image{background:#ccc;background-size:cover;background-position:center;border:0;display:inline-block;line-height:0;position:relative;height:auto;width:100%}.b-image::after,.b-image-loading::before,.b-image-error::before{content:'';display:block;padding-top:100%;width:100%}.b-image-loading::before,.b-image-error::before{position:absolute;top:0;bottom:0;left:0;right:0}.b-image-loading{background:#ccc;}.b-image-loading::before{background:#979fa8;background:url("data:image/gif;base64,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") no-repeat center}.b-image-error{background:#ccc;}.b-image-error::before{background:url("data:image/svg+xml;charset=utf8, ") no-repeat center}.b-input-wrapper{font-size:.75rem;position:relative;width:100%}.b-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid transparent;border-radius:2px;color:#c5cfdb;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:.75em;position:relative;z-index:1;width:100%;transition:all 200ms ease;}.b-input + .b-input-placeholder{background:#272b33;border-color:transparent;color:rgba(197,207,219,0.5)}.b-input[disabled]{color:#c5cfdb;cursor:not-allowed;opacity:.3;}.b-input[disabled] + .b-input-placeholder,.b-input[disabled]:active + .b-input-placeholder,.b-input[disabled]:focus + .b-input-placeholder,.b-input[disabled]:hover + .b-input-placeholder{background:#272b33;border-color:transparent}.b-input:active{color:#c5cfdb;}.b-input:active + .b-input-placeholder{background:#272b33;border-color:#3d8feb}.b-input:focus{color:#c5cfdb;}.b-input:focus + .b-input-placeholder{background:#272b33;border-color:rgba(51,51,51,0)}.b-input:hover{color:#c5cfdb;}.b-input:hover + .b-input-placeholder{background:#272b33;border-color:rgba(51,51,51,0)}.b-input-placeholder{overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;white-space:nowrap;text-overflow:ellipsis;z-index:0}.b-modal-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:auto;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;}.b-modal-wrapper .b-dialog-wrapper{-ms-flex-negative:0;flex-shrink:0;max-width:80vw;position:relative}.b-modal-wrapper .b-dialog{background:#fff;border:1px solid #e6e6e6;box-shadow:1px 2px 3px transparent;color:#111}.b-modal-mask{background:rgba(39,43,51,0.9);position:fixed;top:0;left:0;right:0;bottom:0}.b-pagination-control.b-segmented-control-option.b-button{background:transparent;border-color:transparent;color:#979fa8;}.b-pagination-control.b-segmented-control-option.b-button[disabled],.b-pagination-control.b-segmented-control-option.b-button[disabled]:active,.b-pagination-control.b-segmented-control-option.b-button[disabled]:focus,.b-pagination-control.b-segmented-control-option.b-button[disabled]:hover{background:transparent;border-color:transparent;color:#979fa8}.b-pagination-control.b-segmented-control-option.b-button:active{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button:focus{background:transparent;border-color:transparent;color:#cbcfd3}.b-pagination-control.b-segmented-control-option.b-button:hover{background:transparent;border-color:transparent;color:#cbcfd3}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected{background:transparent;border-color:transparent;color:#fff;}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled],.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]:active,.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]:focus,.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]:hover{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected:active{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected:focus{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected:hover{background:transparent;border-color:transparent;color:#fff}.b-popover{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}.b-popover .b-dialog{background:#272b33;border:1px solid #000;box-shadow:1px 2px 3px transparent;color:#c5cfdb}.b-popover-caret{position:relative;-webkit-transform-origin:center;transform-origin:center;height:16px;width:16px}.b-popover-caret-border{fill:#3d8feb}.b-popover-caret-fill{fill:#3d8feb}.b-popover-anchor-y-start.b-popover-self-y-end .b-popover-caret{margin-top:-3px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.b-popover-anchor-y-end.b-popover-self-y-start .b-popover-caret{margin-bottom:-3px}.b-popover-anchor-x-start.b-popover-self-x-end{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;}.b-popover-anchor-x-start.b-popover-self-x-end .b-popover-caret{margin-left:-3px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.b-popover-anchor-x-end.b-popover-self-x-start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;}.b-popover-anchor-x-end.b-popover-self-x-start .b-popover-caret{margin-right:-3px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.b-progress-wrapper{border:1px solid #3d8feb;border-radius:2px;overflow:hidden;position:relative;height:30px;width:100%}.b-progress-wrapper[data-progress]::before{color:#fff;content:attr(data-progress);line-height:30px;padding-left:10px;position:relative;text-align:left;z-index:1}.b-progress{background:#3d8feb;position:absolute;top:0;left:0;bottom:0}.b-progress-indeterminate{background:#3d8feb;border-color:#3d8feb;top:0;left:0;bottom:0;right:0;-webkit-animation:interdeterminate-progress-bar 2.5s ease-in-out alternate infinite;animation:interdeterminate-progress-bar 2.5s ease-in-out alternate infinite;}.b-progress-indeterminate ~ .b-progress-label{color:#fff}@-webkit-keyframes interdeterminate-progress-bar{from{opacity:0}to{opacity:1}}@keyframes interdeterminate-progress-bar{from{opacity:0}to{opacity:1}}.b-disclosure-toggle{color:#c5cfdb;cursor:pointer;display:inline-block;font-size:.75rem;padding-left:15px;position:relative;}.b-disclosure-toggle::before{content:'';border-width:5px;border-color:transparent;border-left-color:#c5cfdb;border-style:solid;position:absolute;margin-top:-5px;top:50%;left:4px}.b-disclosure-expanded{color:#c5cfdb;}.b-disclosure-expanded > .b-disclosure-toggle::before{border-top-color:#c5cfdb;border-left-color:transparent;margin-top:-3px;left:0}.b-disclosure-content{margin-top:.5rem;width:100%}.b-radio-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.b-radio,.b-radio-label{cursor:pointer}.b-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border:1px solid #c5cfdb;border-radius:50%;-ms-flex-negative:0;flex-shrink:0;margin:1px 3px 0;padding:0;height:16px;width:16px;transition:all 200ms ease;}.b-radio[disabled],.b-radio[disabled]:active,.b-radio[disabled]:focus,.b-radio[disabled]:hover{background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#c5cfdb;cursor:not-allowed;opacity:.3}.b-radio:active{background:radial-gradient(circle at center,#3d8feb 0%,#3d8feb calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#3d8feb}.b-radio:focus{background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#fff}.b-radio:hover{background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#fff}.b-radio.b-radio-selected,.b-radio.b-radio-selected:hover,.b-radio.b-radio-selected:focus,.b-radio.b-radio-selected:active{background:radial-gradient(circle at center,#3d8feb 0%,#3d8feb calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#3d8feb}.b-radio-label{line-height:1.2;margin-left:.25em}.b-segmented-control{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.b-segmented-control-option.b-button{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;background:#535a66;border:1px solid transparent;border-radius:0;color:#fff;cursor:pointer;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:14px;margin:0;padding:.5em .75em;text-align:center;white-space:nowrap;transition:all 200ms ease;}.b-segmented-control-option.b-button:first-of-type{border-top-left-radius:2px;border-bottom-left-radius:2px}.b-segmented-control-option.b-button:last-of-type{border-top-right-radius:2px;border-bottom-right-radius:2px}.b-segmented-control-option.b-button:not(:first-of-type){margin-left:-1px}.b-segmented-control-option.b-button[disabled],.b-segmented-control-option.b-button[disabled]:active,.b-segmented-control-option.b-button[disabled]:focus,.b-segmented-control-option.b-button[disabled]:hover,.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]{background:#282d33;border-color:transparent;color:#fff;opacity:.3}.b-segmented-control-option.b-button:focus{background:#666d7a;border-color:transparent;color:#fff}.b-segmented-control-option.b-button:hover{background:#666d7a;border-color:transparent;color:#fff}.b-segmented-control-option.b-button:active,.b-segmented-control-option.b-button.b-segmented-control-option-selected,.b-segmented-control-option.b-button.b-segmented-control-option-selected:focus,.b-segmented-control-option.b-button.b-segmented-control-option-selected:hover{background:#282d33;border-color:transparent;color:#fff}.b-segmented-control-option.b-button.b-segmented-control-option-selected{z-index:1}.b-tokenfield-wrapper{background:#272b33;border:1px solid transparent;border-radius:2px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.75rem;}.b-tokenfield-wrapper .b-typeahead-wrapper{background:transparent;border:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input + .b-input-placeholder{background:transparent;border-color:transparent;color:rgba(197,207,219,0.5)}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]{color:#c5cfdb;opacity:.3;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled] + .b-input-placeholder,.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]:active + .b-input-placeholder,.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]:focus + .b-input-placeholder,.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:active{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:active + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:focus{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:focus + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:hover{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead,.b-tokenfield-wrapper .b-typeahead-hint{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:10px}.b-tokenfield{display:-webkit-box;display:-ms-flexbox;display:flex}.b-tokenfield-tokens{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;margin:5px 0 5px 5px;}.b-tokenfield-tokens:empty{margin:0}.b-tokenfield-token{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;background:transparent;border:1px solid #4b5363;border-radius:2px;color:#c5cfdb;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;line-height:1;margin-right:5px;padding:5px 10px;white-space:nowrap;transition:all 200ms ease-in-out;}.b-tokenfield-token:focus{background:transparent;border-color:rgba(51,51,51,0);color:#c5cfdb;}.b-tokenfield-token:focus .b-tokenfield-token-close{color:#c5cfdb}.b-tokenfield-token:hover{background:transparent;border-color:rgba(51,51,51,0);color:#c5cfdb;}.b-tokenfield-token:hover .b-tokenfield-token-close{color:#c5cfdb}.b-tokenfield-token:active{background:transparent;border-color:#3d8feb;color:#c5cfdb}.b-tokenfield-token:last-child{margin-right:0}.b-tokenfield-token.b-tokenfield-token-selected{background:#3d8feb;border-color:#4b5363;color:#fff;}.b-tokenfield-token.b-tokenfield-token-selected .b-tokenfield-token-close{color:rgba(255,255,255,0.5)}.b-tokenfield-token.b-tokenfield-token-selected:focus{background:#3d8feb;border-color:#4b5363;color:#fff;}.b-tokenfield-token.b-tokenfield-token-selected:focus .b-tokenfield-token-close{color:#fff}.b-tokenfield-token.b-tokenfield-token-selected:hover{background:#3d8feb;border-color:#4b5363;color:#fff;}.b-tokenfield-token.b-tokenfield-token-selected:hover .b-tokenfield-token-close{color:#fff}.b-tokenfield-token-close{color:rgba(197,207,219,0.5);cursor:pointer;display:inline-block;font-size:.85em;margin-left:.5rem;transition:all 200ms ease-in-out}.b-typeahead-wrapper{background:#272b33;border:1px solid transparent;font-size:.75rem;position:relative;}.b-typeahead-wrapper .b-input{color:#c5cfdb;}.b-typeahead-wrapper .b-input + .b-input-placeholder{background:transparent;border-color:transparent;color:rgba(197,207,219,0.5)}.b-typeahead-wrapper .b-input[disabled]{color:#c5cfdb;opacity:.3;}.b-typeahead-wrapper .b-input[disabled] + .b-input-placeholder,.b-typeahead-wrapper .b-input[disabled]:active + .b-input-placeholder,.b-typeahead-wrapper .b-input[disabled]:focus + .b-input-placeholder,.b-typeahead-wrapper .b-input[disabled]:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-wrapper .b-input:active{color:#c5cfdb;}.b-typeahead-wrapper .b-input:active + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-wrapper .b-input:focus{color:#c5cfdb;}.b-typeahead-wrapper .b-input:focus + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-wrapper .b-input:hover{color:#c5cfdb;}.b-typeahead-wrapper .b-input:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-match-wrapper{background:#272b33;border-bottom-left-radius:2px;border-bottom-right-radius:2px;border:1px solid #000;margin-top:-1px;max-height:300px;overflow:hidden;overflow-y:auto;position:absolute;left:0;right:0;top:100%;z-index:99}.b-typeahead-match-highlight{background:#272b33;color:#fff}.b-typeahead-match{background:#272b33;color:#b3b3b3;cursor:pointer;font-size:13px;line-height:1;padding:.25em .5em;}.b-typeahead-match:focus{background:#272b33;color:#b3b3b3;}.b-typeahead-match:focus .b-typeahead-match-highlight{background:#272b33;color:#fff}.b-typeahead-match:hover{background:#1f2229;color:#b3b3b3;}.b-typeahead-match:hover .b-typeahead-match-highlight{background:#1f2229;color:#fff}.b-typeahead-match.b-typeahead-match-selected,.b-typeahead-match.b-typeahead-match-selected:focus,.b-typeahead-match.b-typeahead-match-selected:hover{background:#3d8feb;color:#ccc;}.b-typeahead-match.b-typeahead-match-selected .b-typeahead-match-highlight,.b-typeahead-match.b-typeahead-match-selected:focus .b-typeahead-match-highlight,.b-typeahead-match.b-typeahead-match-selected:hover .b-typeahead-match-highlight{background:#3d8feb;color:#fff}.demo-loose-list > *:not(:last-child)::after{content:', '}.tall-button{height:50px}.checkbox-group-demo{-webkit-columns:3;-moz-columns:3;columns:3}@media all and (max-width:600px){.checkbox-group-demo{-webkit-columns:2;-moz-columns:2;columns:2}}.b-checkbox:focus{outline:0}.dialog-demo-close-button{background:none !important;border:0;color:#ccc;cursor:pointer;line-height:1;padding:.5rem;position:absolute;top:0;right:0;transition:color 200ms ease;}.dialog-demo-close-button:hover,.dialog-demo-close-button:focus{color:#555}.dialog-demo-close-button:active{color:#c5cfdb}.dialog-demo-close-button::before{content:'X'}.demo-image figure:not(:first-child){margin-left:5px}.demo-image figure:not(:last-child){margin-right:5px}.demo-modal h3{color:inherit;margin-top:0}.demo-modal-cancel-button,.demo-modal-cancel-button:hover,.demo-modal-cancel-button:focus{background:#3d8feb;border-color:transparent;color:#fff}.demo-modal-cancel-button:hover,.demo-modal-cancel-button:focus{opacity:.8}.demo-pagination .b-segmented-control-option-selected{font-weight:700}.demo-pagination .b-pagination-item{display:-webkit-box;display:-ms-flexbox;display:flex;height:7em;margin:0;padding:1rem;}.demo-pagination .b-pagination-item + .b-pagination-item{border-top:1px solid #979fa8}.demo-pagination .b-pagination-item .card-left{-ms-flex-preferred-size:50%;flex-basis:50%}.demo-pagination .b-pagination-item .card-right{-ms-flex-preferred-size:50%;flex-basis:50%;font-size:11pt}.demo-pagination .b-pagination-item .card-left strong{font-size:18pt}@media all and (max-width:800px){.demo-pagination .b-pagination-control{padding-left:.25em;padding-right:.25em}.demo-pagination .b-pagination-control-custom{display:none}.demo-pagination .b-pagination-item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:auto}}.demo-popover .b-dialog{outline:0}.demo-popover .b-dialog-body{padding:0}.demo-popover.b-popover-anchor-y-start.b-popover-self-y-end .b-dialog{border-bottom:3px solid #3d8feb}.demo-popover.b-popover-anchor-y-end.b-popover-self-y-start .b-dialog{border-top:3px solid #3d8feb}.demo-popover.b-popover-anchor-x-start.b-popover-self-x-end .b-dialog{border-right:3px solid #3d8feb}.demo-popover.b-popover-anchor-x-end.b-popover-self-x-start .b-dialog{border-left:3px solid #3d8feb}@media (max-width:600px){.demo-popover{max-width:75vw}}.progress-demo > *{-ms-flex-item-align:start;align-self:flex-start;margin:0 1em}.progress-demo > :first-child{margin-left:0}.progress-demo > :last-child{margin-right:0}#progress-meter .b-progress{position:absolute;right:0;left:0;bottom:0;top:auto}#progress-meter[data-progress]::before{text-align:center;position:absolute;left:0;right:0;z-index:1}
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:
The controls for a tabbed view 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?
Galaxies Nebulae Planets
Component Instance Methods# getSelectedOption()
retrieves the option that is selectedgetSelectedOptionIndex()
retrieves the index of the option that is selectedselectOption(option)
allows for programmatic switching of the active SegmentedControl optionselectOptionByKey(key, value)
allows for programmatic switching of the active SegmentedControl option using a unique keyselectOptionIndex(index)
allows for programmatic switching of the active SegmentedControl option by indexProps# Required Props# Name Implementation Description 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# Name Implementation Description *
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