SegmentedControl

A Segmented Control lets users choose a single or multiple options from a series of related choices.

OverviewReactSwiftKotlin

Choose brand

Aachener ZeitungBelfast TelegraphContactoDe LimburgerDe StandaardDagblad van het NoordenFriesch DagbladGooi- en EemlanderGazet van AntwerpenHet Belang van LimburgHoogeveensche CourantHaarlems DagbladHub GazetteIndependentLeeuwarder CourantLeidsch DagbladLuxembourg TimesLuxemburger WortMeppeler CourantMediahuisHet NieuwsbladNoordhollands DagbladNieuwsblad Noordoost FrieslandNieuwe OoststellingwerverSteenwijker CourantStellingwerfSunday WorldTélécranTelegraafVirguleWhite LabelIjmuider Courant

Color Scheme: light

Choose subtheme

Default (none)BreakingSport

Installation

Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.

With that done, you’re now ready to implement the component in your application.

import { SegmentedControl } from '@mediahuis/chameleon-react';

export default function Example() {
  return (
    <SegmentedControl>
      <SegmentedControlItem label="Item 1" value="item1" id="1" />
      <SegmentedControlItem label="Item 2" value="item2" id="2" />
    </SegmentedControl>
  );
}

Properties

Property	Type	Default	Required	Description
onChange	Function	-	No	Callback when the selected value(s) change.
type	'single' | 'multiple'	'single'	No	Type of the segmented control: allows single or multiple selections.
orientation	'horizontal' | 'vertical'	'horizontal'	No	Layout orientation of the segmented control.
labelHidden	Boolean	-	No	Whether to visually hide the label while keeping it accessible.
size	'sm' | 'lg'	'lg'	No	Size of the segmented control.
fullWidth	Boolean	false	No	Whether the control takes up the full width of the container.
value	String | Unknown	-	Yes	The controlled value of the selected item(s). For single selection, this will be a string. For multiple selection, this will be an array of strings. If not provided, the component will manage its own state.
defaultValue	String | Unknown	-	No	The initial value of the selected item(s) in uncontrolled mode. For `type="single"`, this should be a string. For `type="multiple"`, this should be an array of strings.

SegmentedControlItem Properties

Property	Type	Default	Required	Description
icon	SVGType	-	No
label	String	-	Yes
labelHidden	Boolean	-	No
value	String	-	Yes

• Installation
• Properties
• SegmentedControlItem Properties