SegmentPicker

A SegmentPicker is a segmented control that lets users select a single option from a small, fixed set. Each option is declared with a SegmentPicker.Item, and it can run in controlled (value) or uncontrolled (defaultValue) mode.

Usage

import { SegmentPicker } from '@workflowbuilder/ui';
import { useState } from 'react';

function Example() {
  const [view, setView] = useState('list');
  return (
    <SegmentPicker value={view} onChange={(_event, next) => setView(next)}>
      <SegmentPicker.Item value="list">List</SegmentPicker.Item>
      <SegmentPicker.Item value="grid">Grid</SegmentPicker.Item>
      <SegmentPicker.Item value="board">Board</SegmentPicker.Item>
    </SegmentPicker>
  );
}

Props

childrenrequired

TypeReactElement<SegmentPickerItemProps, Item>[]

className

Typestring

defaultValue

Typestring

Only applies to the UncontrolledSegmentPicker variant (required there).

onChange

Type(event: MouseEvent<HTMLButtonElement>, value: string) => void

shape

TypeSegmentPickerShape

Default'default'

Circle is supported only when every item contains an icon without a label.

size

TypeSize

Default'medium'

value

Typestring

Only applies to the ControlledSegmentPicker variant (required there).

CSS variables

Color

--wb-public-segment-picker-background-color

Size

--wb-public-segment-picker-border-radius-extra-large

--wb-public-segment-picker-border-radius-large

--wb-public-segment-picker-border-radius-medium

--wb-public-segment-picker-border-radius-small

--wb-public-segment-picker-border-radius-extra-small

--wb-public-segment-picker-border-radius-xx-small

--wb-public-segment-picker-border-radius-xxx-small

--wb-public-segment-picker-gap

--wb-public-segment-picker-circle-border-radius