Text Input

Introduction

An input group allows you to add icons and buttons within a text input to expand its functionality. For example, you might use an input group to build a visibility toggle for a password field.

The InputGroup React component supports one non-interactive icon on the left side and one arbitrary element on the right side. InputGroup supports content of any length on the right side (not just icon buttons) because it is able to measure the content and ensure there is always space for it.

InputGroup can be used just like a standard React input element, in a controlled or uncontrolled fashion. In addition to its own props, it supports all valid props for HTML <input> elements and proxies them to that element in the DOM; the most common ones are detailed below.

Included Components

  1. InputGroup: Use the InputGroup component for an advanced single-line input that supports an icon on the left and arbitrary content on the right.
  2. TextArea: Use the TextArea component to allow users to enter a sizeable amount of free-form text.

Examples

InputGroup

An InputGroup example using the placeholder, large, round, and rightElement props.

An InputGroup example using the disabled and leftIcon props.

tag

TextArea

A TextArea with using the intent prop.

A TextArea using the placeholder, disabled, and small props.

Usage

InputGroup

import React from "react";
import { InputGroup } from "@commure/components-foundation";
function MyInputGroup() {
return (
<InputGroup
disabled
large
leftIcon="filter"
placeholder="My Input Group"
rightElement={<Spinner size={Icon.SIZE_STANDARD} />}
/>
);
}
export default MyInputGroup;

TextArea

import React from "react";
import { TextArea } from "@commure/components-foundation";
function MyTextArea() {
return (
<TextArea
growVertically={false}
large
intent={Intent.PRIMARY}
/>
);
}
export default MyTextArea;

API Reference

InputGroup

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
defaultValuefalsestringInitial value of the input, for uncontrolled usage.
disabledfalsebooleanWhether the input is non-interactive. Note that `rightElement` must be disabled separately; this prop will not affect it.
inputReffalse(ref: HTMLInputElement | null) => anyRef handler that receives HTML `<input>` element backing this component.
intentfalseIntentVisual intent color to apply to element.
largefalsebooleanWhether this input should use large styles.
leftIconfalseIconName | MaybeElementName of a Blueprint UI icon (or an icon element) to render on the left side of the input group, before the user's cursor.
onChangefalseReact.FormEventHandler<HTMLElement>Change event handler. Use `event.target.value` for new value.
placeholderfalsestringPlaceholder text in the absence of any value.
rightElementfalseElementElement to render on right side of input. For best results, use a minimal button, tag, or small spinner.
roundfalsebooleanWhether the input (and any buttons) should appear with rounded caps.
smallfalsebooleanWhether this input should use small styles.
typefalsestringHTML `input` type attribute.
valuefalsestringForm value of the input, for controlled usage.

TextArea

Prop NameRequired?TypeDescription
classNamefalsestringA space-delimited list of class names to pass along to a child element.
fillfalsebooleanWhether the text area should take up the full width of its container.
growVerticallyfalsebooleanWhether the text area should automatically grow vertically to accomodate content.
inputReffalse(ref: HTMLTextAreaElement | null) => anyRef handler that receives HTML `<textarea>` element backing this component.
intentfalseIntentVisual intent color to apply to element.
largefalsebooleanWhether the text area should appear with large styling.
smallfalsebooleanWhether the text area should appear with small styling.

Related Reading

InputGroup Blueprint Reference
TextArea Blueprint Reference