Input

import * as React from 'react';
import { LabeledInput } from '@itwin/itwinui-react';

export default () => {
  return (
    <>
      <LabeledInput
        label='Label'
        placeholder='Placeholder'
        message='Hint message'
      />
    </>
  );
};

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

export default () => {
  return (
    <div className='demo-container'>
      <Input placeholder='Small' size='small' />
      <Input placeholder='Medium' />
      <Input placeholder='Large' size='large' />
    </div>
  );
};

import * as React from 'react';
import { LabeledInput } from '@itwin/itwinui-react';

export default () => {
  return (
    <div className='demo-container'>
      <LabeledInput
        label='Positive input'
        message='Happy message'
        status='positive'
        placeholder='Labeled input'
      />
      <LabeledInput
        label='Warning input'
        message='Cautious message'
        status='warning'
        placeholder='Labeled input'
      />
      <LabeledInput
        label='Negative input'
        message='Angry message'
        status='negative'
        placeholder='Labeled input'
      />
    </div>
  );
};

import * as React from 'react';
import { LabeledInput } from '@itwin/itwinui-react';

export default () => {
  return (
    <>
      <LabeledInput
        label='Inline input'
        status='positive'
        placeholder='Labeled input'
        displayStyle='inline'
      />
    </>
  );
};

import * as React from 'react';
import { InputGrid, Label, InputWithDecorations } from '@itwin/itwinui-react';
import { SvgCloseSmall } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <>
      <InputGrid>
        <Label htmlFor='input-1'>Street</Label>
        <InputWithDecorations>
          <InputWithDecorations.Input
            id='input-1'
            defaultValue='1051 Faribault Road'
          />
          <InputWithDecorations.Button label='Clear'>
            <SvgCloseSmall />
          </InputWithDecorations.Button>
        </InputWithDecorations>
      </InputGrid>
    </>
  );
};

import * as React from 'react';
import { ButtonGroup, IconButton, Input, Button } from '@itwin/itwinui-react';
import { SvgSearch } from '@itwin/itwinui-icons-react';

export default () => {
  return (
    <div className='demo-container'>
      <ButtonGroup>
        <Button>Button 1</Button>
        <Input aria-label='Search bar' />
        <IconButton label='Search'>
          <SvgSearch />
        </IconButton>
      </ButtonGroup>
      <ButtonGroup>
        <Input
          aria-label='URL'
          value='https://itwinui.bentley.com/docs/buttongroup'
        />
        <Button styleType='high-visibility'>Copy</Button>
      </ButtonGroup>
    </div>
  );
};

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

export default () => {
  return (
    <div className='demo-container'>
      <div className='demo-labels-container'>
        <Label htmlFor='first-name'>First name</Label>
        <Label htmlFor='middle-initial'>Middle initial</Label>
        <Label htmlFor='last-name'>Last name</Label>
      </div>
      <div className='demo-inputs-container'>
        <Input id='first-name' />
        <Input id='middle-initial' maxlength='1' />
        <Input id='last-name' />
      </div>
    </div>
  );
};