Segmented Control

A segmented control is a set of checkable buttons. No more than one button can be checked at a time. When a user checks an unchecked button, the previously checked button is automatically unchecked.

It is possible to initialise the set with all buttons in the unchecked state. This forces the user to check one of the buttons before moving past a certain point in the workflow.

Use cases:

• Used anywhere someone may want to visually and structurally group related interactive controls.

Examples

Item 1Item 2Item 3Chosen Option:

Genesis

Declaration

  <rapid-segmented-control></rapid-segmented-control>

Usage

  @customElement({
    name: 'my-element',
    template: html`
        <rapid-segmented-control value=${sync((x) => x.controlValue)}>
          <rapid-segmented-item>Item 1</rapid-segmented-item>
          <rapid-segmented-item>Item 2</rapid-segmented-item>
          <rapid-segmented-item>Item 3</rapid-segmented-item>
        </rapid-segmented-control>
      `,
  })

  export class MyElement extends GenesisElement {
    @observable controlValue = '';
    controlValueChanged() {
      console.log(this.controlValue);
    }
  }

React

Declaration

  <rapid-segmented-control></rapid-segmented-control>

Usage

  export function MyComponent() {

    const [outputValue, setOutputValue] = useState('');

    const onChange = (event) => {
      setOutputValue(event.target.value);
      console.log(outputValue);
    }

    return (
      <rapid-segmented-control onChange={onChange}>
        <rapid-segmented-item>Item 1</rapid-segmented-item>
        <rapid-segmented-item>Item 2</rapid-segmented-item>
        <rapid-segmented-item>Item 3</rapid-segmented-item>
      </rapid-segmented-control>
    );
  }

Angular

Declaration

  <rapid-segmented-control></rapid-segmented-control>

Usage

  import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  @Component({
    selector: 'my-root',
    template: `
          <rapid-segmented-control
            (change)="onChange($event)"
          >
            <rapid-segmented-item>Item 1</rapid-segmented-item>
            <rapid-segmented-item>Item 2</rapid-segmented-item>
            <rapid-segmented-item>Item 3</rapid-segmented-item>
          </rapid-segmented-control>
        `,
    standalone: true,
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    imports: [FormsModule],
  })
  export class AppComponent {
    onChange(event: Event) {
      const target = event.target as HTMLInputElement;
      console.log(target.value);
    }
  }

API

Attributes

Name	Type	Description	Example
readonly	boolean	Configures the component so the user cannot alter the state via the web browser.	<rapid-segmented-control readonly>
disabled	boolean	Similar to readonly, but with a blur on the component	<rapid-segmented-control disabled>
name	string	Defines the name of the element	<rapid-segmented-control name="componentName">
value	string	Defines the value associated with this element.	<rapid-segmented-control value=${sync((x) => x.controlValue)}>
orientation	"horizontal" | "vertical"	Sets the orientation of the group of components. Default: horizontal	<rapid-segmented-control orientation="vertical">

Properties:

This component doesn't have any properties which are not also controlled via attributes.

Slots

Slot	Description
Default	The default slot where rapid-segmented-items go
label	The label

Parts

There are no parts.

Events fired

Event	Type	Use	Example
change	void	Emits a custom change event when the component state changes.	<rapid-segmented-control @change="${(x) => x.myChangeHandler()}">

Events listened to

This component doesn't listen to any events.