Input group

An InputGroup is a single-line text input with an optional icon on the left and an element on the right, such as a button or a tag. Use TextArea for multiline text.

Usage#

import { InputGroup } from "@clawscale/react";

<InputGroup leftIcon="filter" placeholder="Filter pipelines" value={query} onValueChange={setQuery} />

Use it like an <input>, controlled or uncontrolled. onValueChange receives the string value directly.

Examples#

Left icon#

leftIcon renders an icon inside the input, before the text.

Owner

core/input-group/left-icon.tsx

import { FormGroup, InputGroup } from "@clawscale/react";

export default function InputGroupLeftIcon() {
  return (
    <FormGroup label="Owner" labelFor="input-group-owner">
      <InputGroup id="input-group-owner" leftIcon="user" placeholder="data-platform@example.com" />
    </FormGroup>
  );
}

Right element#

rightElement holds one element after the text, usually a minimal button or a tag. The input pads its text to fit the element.

1,204 events

core/input-group/right-element.tsx

import { Button, InputGroup, Tag } from "@clawscale/react";

const CONNECTION = "postgres://warehouse.internal:5432/analytics";

export default function InputGroupRightElement() {
  return (
    <>
      <InputGroup
        aria-label="Connection string"
        defaultValue={CONNECTION}
        readOnly
        rightElement={
          <Button
            aria-label="Copy connection string"
            icon="duplicate"
            variant="minimal"
            onClick={() => navigator.clipboard.writeText(CONNECTION)}
          />
        }
      />
      <InputGroup
        aria-label="Filter events"
        defaultValue="status:failed"
        leftIcon="filter"
        rightElement={<Tag minimal>1,204 events</Tag>}
      />
    </>
  );
}

Search#

type="search" gives the input round ends. Some browsers also clear it on Escape.

core/input-group/search.tsx

import { InputGroup } from "@clawscale/react";

export default function InputGroupSearch() {
  return (
    <InputGroup aria-label="Search datasets" leftIcon="search" placeholder="Search 1,204 datasets" type="search" />
  );
}

Intent#

intent colors the border and focus ring. Pair it with helper text in a FormGroup to explain the state.

core/input-group/intent.tsx

import { InputGroup } from "@clawscale/react";

export default function InputGroupIntent() {
  return (
    <>
      <InputGroup aria-label="Primary" intent="primary" placeholder="Primary" />
      <InputGroup aria-label="Success" intent="success" placeholder="Success" />
      <InputGroup aria-label="Warning" intent="warning" placeholder="Warning" />
      <InputGroup aria-label="Danger" intent="danger" placeholder="Danger" />
    </>
  );
}

Size#

size accepts small, medium (default) and large.

core/input-group/size.tsx

import { InputGroup } from "@clawscale/react";

export default function InputGroupSize() {
  return (
    <>
      <InputGroup aria-label="Small" leftIcon="search" placeholder="Small" size="small" />
      <InputGroup aria-label="Medium" leftIcon="search" placeholder="Medium" size="medium" />
      <InputGroup aria-label="Large" leftIcon="search" placeholder="Large" size="large" />
    </>
  );
}

Disabled#

disabled blocks the input but not its rightElement, so disable that too. Use readOnly for a value that users can still select and copy.

core/input-group/disabled.tsx

import { Button, InputGroup } from "@clawscale/react";

export default function InputGroupDisabled() {
  return (
    <InputGroup
      aria-label="Source table"
      defaultValue="analytics.events_raw"
      disabled
      leftIcon="th"
      rightElement={<Button aria-label="Edit source table" disabled icon="edit" variant="minimal" />}
    />
  );
}

Async control#

Set asyncControl when value changes after the change event, for example through a store that applies updates asynchronously. The cursor then stays in place while the user types.

Table name

core/input-group/async-control.tsx

import { FormGroup, InputGroup } from "@clawscale/react";
import { useState } from "react";

export default function InputGroupAsyncControl() {
  const [tableName, setTableName] = useState("orders_daily");
  return (
    <FormGroup label="Table name" labelFor="input-group-table">
      <InputGroup
        asyncControl
        id="input-group-table"
        value={tableName}
        // A stand-in for a store that applies updates after the change event.
        onValueChange={(value) => setTimeout(() => setTableName(value), 0)}
      />
    </FormGroup>
  );
}

Interactive playground#

View source on GitHub

Props interface#

InputGroup also accepts the HTML attributes of an <input>.

interface InputGroupProps extends Omit<HTMLInputProps, keyof ControlledInputValueProps | "size">, ControlledInputValueProps, InputSharedProps

@clawscale/react

Props	Description
`asyncControl`	`boolean` = `false` Set this to `true` if you will be controlling the `value` of this input with asynchronous updates. These may occur if you do not immediately call setState in a parent component with the value from the `onChange` handler, or if working with certain libraries like __redux-form__.
`defaultValue`	`T` Initial value for uncontrolled usage. Mutually exclusive with `value` prop. Inherited from `ControlledValueProps`
`fill`	`boolean` Whether the component should take up the full width of its container. Inherited from `InputSharedProps`
`inputClassName`	`string` Class name to apply to the `<input>` element (not the InputGroup container). Inherited from `InputSharedProps`
`inputRef`	`React.Ref<HTMLInputElement>` Ref attached to the HTML `<input>` element backing this component. Inherited from `InputSharedProps`
`inputSize`	`HTMLInputProps["size"]` Alias for the native HTML input `size` attribute. see: https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/size
`intent`	`Intent` Visual intent color to apply to element. Inherited from `IntentProps`
`large`deprecated	`boolean` = `false` Whether this input should use large styles. use `size="large"` instead.
`leftElement`	`React.JSX.Element` Element to render on the left side of input. This prop is mutually exclusive with `leftIcon`. Inherited from `InputSharedProps`
`leftIcon`	`IconName \| MaybeElement` Name of a Blueprint UI icon to render on the left side of the input group, before the user's cursor. Inherited from `InputSharedProps`
`onValueChange`	`(value: T, targetElement: E \| null) => void` Callback invoked when the component value changes, typically via user interaction, in both controlled and uncontrolled mode. Inherited from `ControlledValueProps`
`rightElement`	`React.JSX.Element` Element to render on right side of input. For best results, use a minimal button, tag, or small spinner. Inherited from `InputSharedProps`
`round`	`boolean` Whether the input (and any buttons) should appear with rounded caps.
`size`	`Size` = `"medium"` Size of the input.
`small`deprecated	`boolean` = `false` Whether this input should use small styles. use `size="small"` instead.
`tagName`	`keyof React.JSX.IntrinsicElements` = `"div"` Name of the HTML tag that contains the input group.
`type`	`string` = `"text"` HTML `input` type attribute.
`value`	`T` Controlled value. Mutually exclusive with `defaultValue` prop. Inherited from `ControlledValueProps`