TextInput

Scales

Use scale property to change the size of the input.

sm
md
lg

import { TextInput } from 'swash/v2/TextInput';

() => (
  <TextInput scale="lg" placeholder="Some text.." />
);

Invalid

Use aria-invalid property to put the input in an invalid state.

import { TextInput } from 'swash/v2/TextInput';

() => (
  <TextInput aria-invalid placeholder="Some text.." />
);

Disabled

Use disabled property to put the input in a disabled state.

import { TextInput } from 'swash/v2/TextInput';

() => (
  <TextInput disabled placeholder="Some text.." />
);

Group and adornments

To add an adorment at the end of the input, wrap it in a TextInputGroup.

Size of icons and scale of button is automatically computed.

sm
md
lg

import { Button } from 'swash/Button';
import { TextInputGroup, TextInput } from 'swash/v2/TextInputGroup';
import { IoEllipsisHorizontal, IoSearch } from 'swash/Icon';

() => (
  <TextInputGroup
    scale={scale}
    startAdornment={({ iconSize }) => (
      <IoSearch size={iconSize} />
    )}
    endAdornment={({ buttonScale }) => (
      <Button scale={buttonScale} appearance="text" iconOnly variant="secondary">
        <IoEllipsisHorizontal />
      </Button>
    )}
  >
    <TextInput scale={scale} placeholder="Some text.." />
  </TextInputGroup>
);

It is also possible to specify an arbitrary endorment size using startAdormentSize or endAdornmentSize.

sm	This is good
md	This is good
lg	This is good

import { Button } from 'swash/Button';
import { TextInputGroup, TextInput } from 'swash/v2/TextInputGroup';
import { IoEllipsisHorizontal, IoSearch } from 'swash/Icon';

() => (
  <TextInputGroup
    scale={scale}
    endAdornment={<>This is good</>}
    endAdornmentSize={100}
  >
    <TextInput scale={scale} placeholder="Some text.." />
  </TextInputGroup>
);

Render as child

Use asChild to render the input as the child. Could be used if you want to use a custom editor.

import { TextInput } from 'swash/v2/TextInput';

() => (
  <TextInput asChild>
    <div contentEditable />
  </TextInput>
);