Select

A Select lets users choose a single option from a dropdown list. Items are passed as an array of { value, label } objects, and separators can be mixed in to group related options.

Usage

import { Select, type SelectItem } from '@workflowbuilder/ui';
import { useState } from 'react';

const ITEMS: SelectItem[] = [
  { value: 'opus', label: 'Claude Opus' },
  { value: 'sonnet', label: 'Claude Sonnet' },
  { value: 'haiku', label: 'Claude Haiku' },
];

function Example() {
  const [model, setModel] = useState<string | number | null>('opus');
  return (
    <Select items={ITEMS} value={model} placeholder="Choose a model" onChange={(_event, next) => setModel(next)} />
  );
}

Props

itemsrequired

TypeSelectItem[]

List of items to display in the select dropdown

className

Typestring

Custom class name for the component.

defaultValue

TypeSelectValueType

The default value of the select when uncontrolled.

disabled

Typeboolean

Whether the select is disabled.

error

Typeboolean

Defaultfalse

Whether the select has an error

helperText

TypeReactNode

Message rendered under the control and announced with it.

id

Typestring

Identifies the control; a generated id is used when omitted.

isRequired

Typeboolean

Adds the required marker next to the label.

label

TypeReactNode

Label rendered above the control and linked to it.

name

Typestring

Identifies the field when a form is submitted.

onChange

Type(event: SyntheticEvent | Event | null, value: SelectValueType) => void

Callback fired when the value of the select changes.

placeholder

Typestring

Placeholder text for the select input

required

Typeboolean

Whether the user must choose a value before submitting a form.

size

TypeItemSize

Default'medium'

Size of the select input

state

TypeFieldState

Default'default'

Visual state of the control.

value

TypeSelectValueType

The controlled value of the select.

CSS variables

Color

--wb-public-select-button-color

--wb-public-select-button-border-color

--wb-public-select-button-border-color-focus

--wb-public-select-button-focus-ring-color

--wb-public-select-button-color-disabled

--wb-public-select-button-background-color-disabled

--wb-public-select-button-background-color-error

--wb-public-select-button-border-color-error

--wb-public-select-button-color-error

Size

--wb-public-select-border-size