Segmented control - CSS Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Construction

The CSS component uses a div tag.

z-segmented-control

The z-segmented-control parameter is the main parameter used to render the segmented control component.

Each label inside the z-segmented-control container should contain a button component with the z-button HTML custom attribute. Followed by a radio type input.

You can customize the button following the button component documentation.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.0/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/SegmentedControl.css" />
<link rel="stylesheet" href="/0.5.0/@zurich/css-components/Button.css" />
<link rel="stylesheet" href="/0.5.0/@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:line"></button>
    <input type="radio" name="segmented-control-2i" value="1" checked />
  </label><label>
    <button z-button icon="bar-chart:line"></button>
    <input type="radio" name="segmented-control-2i" value="2" />
  </label>
</div>

<!-- combined -->
<div z-segmented-control>
  <label>
    <button z-button icon="bar-chart:line"></button>
    <input type="radio" name="segmented-control-2c" value="1" checked />
  </label><label>
    <button z-button icon="bar-chart:line">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>