Input

An Input is a single-line text field for collecting short, free-form text. It supports prefix and suffix icons, a clear affordance, four letter sizes, and the default, critical, success, and read-only states. A read-only field stays focusable so its value can be selected and copied.

Usage

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

function Example() {
  const [value, setValue] = useState('');
  const hasError = value.length > 0 && value.length < 3;

  return (
    <Input
      size="m"
      state={hasError ? 'critical' : 'default'}
      label="Project name"
      helperText={hasError ? 'Enter at least three characters' : 'Shown throughout the workspace'}
      isRequired
      placeholder="Type something"
      value={value}
      onChange={(event) => setValue(event.target.value)}
      onClear={() => setValue('')}
      clearLabel="Clear project name"
    />
  );
}

Props

Also accepts every standard <input> attribute (onChange, placeholder, aria-*, …); they are forwarded to the underlying element.

clearLabel

Typestring

Accessible name for the clear affordance rendered when `onClear` is provided.

helperText

TypeReactNode

isRequired

Typeboolean

label

TypeReactNode

onClear

Type() => void

Renders a clear affordance that invokes this callback.

prefixIcon

TypeReactNode

size

TypeFieldSize

Default'm'

state

TypeFieldState

Default'default'

Disabled controls take precedence over the read-only state.

suffixIcon

TypeReactNode

CSS variables

Color

--wb-public-input-color

--wb-public-input-color-disabled

--wb-public-input-placeholder-color

--wb-public-input-root-background-color

--wb-public-input-root-background-color-disabled

--wb-public-input-root-background-color-critical

--wb-public-input-root-background-color-success

--wb-public-input-root-border-color

--wb-public-input-root-border-color-hover

--wb-public-input-root-border-color-focus

--wb-public-input-root-border-color-critical

--wb-public-input-root-border-color-success

--wb-public-input-root-icon-color

--wb-public-input-root-color-disabled

--wb-public-input-root-color

--wb-public-input-root-color-critical

--wb-public-field-label-color

--wb-public-field-helper-color

--wb-public-field-critical-color

--wb-public-field-success-color

--wb-public-field-color-disabled

--wb-public-field-required-color-disabled

Size

--wb-public-input-root-border-size

--wb-public-field-gap

--wb-public-field-row-min-height

--wb-public-field-font-size

--wb-public-field-font-weight

--wb-public-field-line-height

--wb-public-input-height-l

--wb-public-input-height-m

--wb-public-input-height-s

--wb-public-input-height-xs

--wb-public-input-padding-l

--wb-public-input-padding-m

--wb-public-input-padding-s

--wb-public-input-padding-xs

--wb-public-input-border-radius-l

--wb-public-input-border-radius-m

--wb-public-input-border-radius-s

--wb-public-input-border-radius-xs

--wb-public-input-gap-l

--wb-public-input-gap-m

--wb-public-input-gap-s

--wb-public-input-gap-xs