Inputs

The Inputs category in the @bentley/ui-core package includes components for working with input controls, such as Input, IconInput, NumberInput TextArea.

Input

The Input React component is a wrapper for the <input type="text"> HTML element. It is meant to receive text input from the user. You can display hint text within the field itself. This hint text is replaced by the actual text input by the user.

The hint text is specified using the placeholder prop.

<Input placeholder="Basic Input" />

Disabled

<Input placeholder="Disabled Input" disabled />

Inputs in Dark Mode

Textarea

The Textarea React component is a wrapper for the <textarea> HTML element. It is an input field that supports multiple rows.

<Textarea placeholder="Basic Textarea" />

IconInput

The IconInput React component is an Input component with an icon displayed to the left of the input field.

<IconInput placeholder="Icon Input" icon={<Icon iconSpec="icon-placeholder" />} />

NumberInput

The NumberInput React component is an input component that accepts numeric input. It contains up and down arrows to the right that increment and decrement the value.

<NumberInput placeholder="Number Input" min={1} max={100} />

Labeled Components

The Input and Textarea components have a labeled version.

LabeledInput

<LabeledInput label="Labeled Input" placeholder="Labeled Input" />

LabeledTextarea

<LabeledTextarea label="Labeled Textarea" placeholder="Labeled Textarea" />

Additional Inputs in Dark Mode

API Reference

• Inputs

Last Updated: 12 June, 2024