Segmented control

...

Browser support

...

Parameters

Hello

The parametrization of the component can be done with the following custom HTML params:

Name	Type	Description
name	string?
disabled	boolean?
options	object[]

The events emitted from the component are:

Name	Payload	Description
onchange	string	Returns the new value of the "value" attribute

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.3.6/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/SegmentedControl.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Button.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Icon.css" />

Code

<!-- Default -->
<div z-segmented-control>
  <label>
    <button z-button>Text 1</button>
    <input type="radio" name="segmented-control-2" value="1" checked />
  </label><label>
    <button z-button>Text 2</button>
    <input type="radio" name="segmented-control-2" value="2" />
  </label>
</div>

<!-- icon -->
<div z-segmented-control>
  <label>
    <button z-button icon="bar-chart:outline"></button>
    <input type="radio" name="segmented-control-2i" value="1" checked />
  </label><label>
    <button z-button icon="bar-chart:outline"></button>
    <input type="radio" name="segmented-control-2i" value="2" />
  </label>
</div>

<!-- combined -->
<div z-segmented-control>
  <label>
    <button z-button icon="bar-chart:outline"></button>
    <input type="radio" name="segmented-control-2c" value="1" checked />
  </label><label>
    <button z-button icon="bar-chart:outline">Text</button>
    <input type="radio" name="segmented-control-2c" value="2" />
  </label>
</div>

<!-- disabled -->
<div z-segmented-control>
  <label>
    <button z-button>Text 1</button>
    <input type="radio" name="segmented-control-2d" value="1" disabled checked />
  </label><label>
    <button z-button>Text 2</button>
    <input type="radio" name="segmented-control-2d" value="2" disabled />
  </label>
</div>