1. Docs
2. Components
3. Forms & inputs
4. Segmented control

Segmented control 1.2.2

The <velin-segmented-control> component is a toggle group with aria-pressed on each segment. Mark the default with the selected attribute. Added in 0.7.5. Deutsch: Segmentsteuerung

When to use

• Exclusive choices in a compact toggle group with <velin-segmented-control> (aria-pressed on segments).
• View modes or short option sets where a segmented control fits better than radios or tabs.

When not

• Independent actions that can all stay available — use Button Group.
• Multi-page navigation — use Navs & tabs.

Example

<velin-segmented-control aria-label="View">
  <button type="button" selected>List</button>
  <button type="button">Grid</button>
</velin-segmented-control>

Import

Load the bundle once, then use the custom element in your markup:

<script type="module" src="../../dist/velinstyle-components.min.js"></script>
<velin-segmented-control>…</velin-segmented-control>

Accessibility

• Label the control (examples use aria-label on <velin-segmented-control>).
• Each segment uses aria-pressed; mark the default with the selected attribute.

Related

• Button Group
• Navs & tabs
• Rating