Segmented Button - Seventh UI CSS

Items

Conexão Label Label

Conexão Label Label Label

Conexão Label Label Label Label

Conexão Label Label Label Label Label

States

Disable Hover Clicked Hover-clicked

Disabled

RTSP HTTP

Dark Theme

Conexão Label Label Label

CSS API

Use native radios for persistent, mutually exclusive choices. Use button markup only when the segmented control triggers commands and the selected state is managed by the application.

<fieldset class="sui-segmented sui-segmented--with-legend">
  <legend class="sui-segmented__legend">Conexão</legend>
  <input class="sui-segmented__input" type="radio" name="connection" id="connection-rtsp" checked>
  <label class="sui-segmented__item" for="connection-rtsp">
    <span class="sui-segmented__text">RTSP</span>
  </label>
  <input class="sui-segmented__input" type="radio" name="connection" id="connection-http">
  <label class="sui-segmented__item" for="connection-http">
    <span class="sui-segmented__text">HTTP</span>
  </label>
</fieldset>