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" />

input

Disabled

<Input placeholder="Disabled Input" disabled />

input disabled

Inputs in Dark Mode

inputs dark

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" />

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" />} />

icon input

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} />

number input

Labeled Components

The Input and Textarea components have a labeled version.

LabeledInput

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

labeled input

LabeledTextarea

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

labeled textarea

Additional Inputs in Dark Mode

inputs2 dark

API Reference

Last Updated: 11 June, 2024