Input grid

Used to display form elements with label and/or status message.

import * as React from 'react';
import { InputGrid, Input, Label, StatusMessage } from '@itwin/itwinui-react';

export default () => {
  return (
    <InputGrid>
      <Label htmlFor='input-1'>This is label</Label>
      <Input placeholder='Input' id='input-1' />
      <StatusMessage>Message</StatusMessage>
    </InputGrid>
  );
};

InputGrid is a layout component that allows to group label, form field and status message.

You can add any form field (eg. Select, ComboBox or InputWithDecorations).

We recommend Label and StatusMessage components with this layout.

import * as React from 'react';
import { InputGrid, Select, Label, StatusMessage } from '@itwin/itwinui-react';
import { SvgAirplane } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <InputGrid>
      <Label id='select-1'>This is label for Select</Label>
      <Select
        options={[
          { value: 1, label: 'Option 1' },
          { value: 2, label: 'Option 2' },
          { value: 3, label: 'Option 3' },
        ]}
        placeholder='Select option'
        triggerProps={{ 'aria-labelledby': 'select-1' }}
      />
      <StatusMessage startIcon={<SvgAirplane />}>Message</StatusMessage>
    </InputGrid>
  );
};

Inline label

You can use labelPlacement prop to switch placement of the label to inline.

import * as React from 'react';
import { InputGrid, Input, Label, StatusMessage } from '@itwin/itwinui-react';

export default () => {
  return (
    <InputGrid labelPlacement='inline'>
      <Label htmlFor='input-2'>This is label</Label>
      <Input placeholder='Input' id='input-2' />
      <StatusMessage>Message</StatusMessage>
    </InputGrid>
  );
};

To provide the best experience to all users, it is recommended to associate the label with the form field (e.g. using htmlFor and id attributes) and the form field with the message (e.g. using aria-describedby). React’s useId hook can be used to generate component-level unique ids.

const idPrefix = useId();
const inputId = `${idPrefix}-input`;
const messageId = `${idPrefix}-message`;

<InputGrid>
  <Label htmlFor={inputId}>Label</Label>
  <Input id={inputId} aria-describedby={messageId} />
  <StatusMessage id={messageId}>Hint message</StatusMessage>
</InputGrid>;

If the labels, form fields and message passed as children have not been explicitly associated, then InputGrid will attempt to associate them automatically as a fallback. This is done by looping through the children and cloning them with the appropriate props. However this fallback approach is not foolproof and may not work in all cases (for example, it will break if you have wrapper elements around your labels or inputs), so make sure you test your final UI and explicitly associate the children if needed.

Props

Prop	Description	Default
labelPlacement	Set display style of label. Supported values: 'default' - label appears above input. 'inline' - appears in the same line as input. "default" \| "inline"	'default'
as	"symbol" \| "object" \| "div" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| ... 158 more ... \| FunctionComponent<...>

Inline label

Accessibility

Props