Use segment controls for mutually exclusive selections that directly controls another component.
This component is deprecated! Please use the new Segmented Controls instead.
Old component won’t get updates unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
New component should always be used unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
If you are looking to migrate this component and require help, reach out to the #ask-design-system Slack channel.
<tk-segmented-controls options="options">
</tk-segmented-controls>
Pass the component an options
prop to render the controls. The properties section at the bottom of this page describes the expected data model.
<tk-segmented-controls options="options" size="small">
</tk-segmented-controls>
<tk-segmented-controls options="options" size="large">
</tk-segmented-controls>
<tk-segmented-controls options="options">
</tk-segmented-controls>
To disable an option, set the disabled
key of the option object to true
.
<tk-segmented-controls options="options">
</tk-segmented-controls>
To disable all options, set the disabled
key of every option object to true
.
<!-- for demo purposes only -->
<tk-highlight id="exampleSegmentedControlsOutput" class="l-block"></tk-highlight>
<tk-segmented-controls options="options">
</tk-segmented-controls>
Upon selecting a control, the controlSelect
event is emitted. It contain a detail
property equal to the value
of the clicked option.
<tk-segmented-controls options="options" selected="monthly">
</tk-segmented-controls>
Pass the component a selected
prop which matches the value of the option that you’d like prefilled.
<tk-segmented-controls options="options" fill-container>
</tk-segmented-controls>
By default, options are as wide as their content. To have them grow to the width of their container, set fill-container
.
<tk-segmented-controls options="options" size="small">
</tk-segmented-controls>
<hr>
<tk-segmented-controls options="options">
</tk-segmented-controls>
<hr>
<tk-segmented-controls options="options" size="large">
</tk-segmented-controls>
<hr>
<tk-segmented-controls options="options" fill-container="true">
</tk-segmented-controls>
<div>
<tk-segmented-controls variant="blue-50" options="options"></tk-segmented-controls>
</div>
<div>
<tk-segmented-controls variant="blue-100" options="options"></tk-segmented-controls>
</div>
There’s a total of 3 different color variations for this component. grey-50
is the default.