Input with decorations

Input component with various additional decorations

import * as React from 'react';
import { InputWithDecorations, Icon } from '@itwin/itwinui-react';
import { SvgStar, SvgInfo } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <InputWithDecorations>
      <InputWithDecorations.Icon>
        <SvgInfo />
      </InputWithDecorations.Icon>
      <InputWithDecorations.Input placeholder='Input with decorations' />
      <InputWithDecorations.Button label='Icon button'>
        <SvgStar />
      </InputWithDecorations.Button>
    </InputWithDecorations>
  );
};

Add icons, buttons and other various subcomponents to input.

import * as React from 'react';
import { InputWithDecorations, Text, Divider } from '@itwin/itwinui-react';
import {
  SvgCaretUpSmall,
  SvgCaretDownSmall,
  SvgSearch,
} from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <InputWithDecorations>
      <InputWithDecorations.Icon>
        <SvgSearch />
      </InputWithDecorations.Icon>
      <InputWithDecorations.Input placeholder='Search...' />
      <Text className='demo-text'>0 / 5</Text>
      <Divider orientation='vertical' />
      <InputWithDecorations.Button label='Next result'>
        <SvgCaretDownSmall />
      </InputWithDecorations.Button>
      <InputWithDecorations.Button label='Previous result'>
        <SvgCaretUpSmall />
      </InputWithDecorations.Button>
    </InputWithDecorations>
  );
};

Status

InputWithDecorations can have positive, warning and negative status.

import * as React from 'react';
import { InputWithDecorations, Icon } from '@itwin/itwinui-react';
import { SvgAdd, SvgPlaceholder } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <div className='demo-container'>
      <InputWithDecorations status='positive'>
        <InputWithDecorations.Icon>
          <SvgPlaceholder />
        </InputWithDecorations.Icon>
        <InputWithDecorations.Input placeholder='Positive input' />
        <InputWithDecorations.Button label='Add'>
          <SvgAdd />
        </InputWithDecorations.Button>
      </InputWithDecorations>
      <InputWithDecorations status='warning'>
        <InputWithDecorations.Icon>
          <SvgPlaceholder />
        </InputWithDecorations.Icon>
        <InputWithDecorations.Input placeholder='Warning input' />
        <InputWithDecorations.Button label='Add'>
          <SvgAdd />
        </InputWithDecorations.Button>
      </InputWithDecorations>
      <InputWithDecorations status='negative'>
        <InputWithDecorations.Icon>
          <SvgPlaceholder />
        </InputWithDecorations.Icon>
        <InputWithDecorations.Input placeholder='Negative input' />
        <InputWithDecorations.Button label='Add'>
          <SvgAdd />
        </InputWithDecorations.Button>
      </InputWithDecorations>
    </div>
  );
};

Sizes

We support small, default and large size InputWithDecorations.

import * as React from 'react';
import { InputWithDecorations, Icon } from '@itwin/itwinui-react';
import { SvgAdd, SvgPlaceholder } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <div className='demo-container'>
      <InputWithDecorations size='small'>
        <InputWithDecorations.Icon>
          <SvgPlaceholder />
        </InputWithDecorations.Icon>
        <InputWithDecorations.Input placeholder='Small input' />
        <InputWithDecorations.Button label='Add'>
          <SvgAdd />
        </InputWithDecorations.Button>
      </InputWithDecorations>
      <InputWithDecorations>
        <InputWithDecorations.Icon>
          <SvgPlaceholder />
        </InputWithDecorations.Icon>
        <InputWithDecorations.Input placeholder='Default input' />
        <InputWithDecorations.Button label='Add'>
          <SvgAdd />
        </InputWithDecorations.Button>
      </InputWithDecorations>
      <InputWithDecorations size='large'>
        <InputWithDecorations.Icon>
          <SvgPlaceholder />
        </InputWithDecorations.Icon>
        <InputWithDecorations.Input placeholder='Large input' />
        <InputWithDecorations.Button label='Add'>
          <SvgAdd />
        </InputWithDecorations.Button>
      </InputWithDecorations>
    </div>
  );
};

Disabled

You can also disable whole component or just parts of it.

import * as React from 'react';
import { InputWithDecorations, Icon } from '@itwin/itwinui-react';
import { SvgAdd, SvgPlaceholder } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <div className='demo-container'>
      <InputWithDecorations isDisabled>
        <InputWithDecorations.Icon>
          <SvgPlaceholder />
        </InputWithDecorations.Icon>
        <InputWithDecorations.Input placeholder='Disabled input' />
        <InputWithDecorations.Button label='Add'>
          <SvgAdd />
        </InputWithDecorations.Button>
      </InputWithDecorations>
      <InputWithDecorations>
        <InputWithDecorations.Icon>
          <SvgPlaceholder />
        </InputWithDecorations.Icon>
        <InputWithDecorations.Input placeholder='Disabled input' />
        <InputWithDecorations.Button label='Add' disabled>
          <SvgAdd />
        </InputWithDecorations.Button>
      </InputWithDecorations>
    </div>
  );
};

Props

Prop	Description	Default
isDisabled	boolean
status	"positive" \| "warning" \| "negative"
size	"small" \| "large"
as	"symbol" \| "object" \| "div" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| "b" \| "base" \| "bdi" \| "bdo" \| "big" \| "blockquote" \| "body" \| "br" \| "button" \| "canvas" \| ... 158 more ... \| FunctionComponent<...>