InputField / React

To implement InputField component into your project you’ll need to add the import:

import InputField from "@kiwicom/orbit-components/lib/InputField";

After adding import into your project you can use it simply like:

<InputField />

Props

Table below contains all types of the props available in InputField component.

enum

Functional specs

• The error prop overwrites the help prop, due to higher priority.

• The color of the label will turn into cloud shade when the InputField has some filled value.

• You can use string for currency InputField, or React.Node for InputField with icon.

• If you want to use ButtonLink as suffix for the InputField, use transparent prop for the ButtonLink, e.g.:

<InputField
  placeholder="My placeholder"
  suffix={
    <ButtonLink transparent icon={<Visibility />} />
  }
/>

• Usage of Tag in InputField

import Tag from "@kiwicom/orbit-components/lib/Tag";

<InputField
  placeholder="My placeholder"
  tags={
    <div>
      <Tag>Brno</Tag>
      <Tag>Praha</Tag>
    </div>
  }
/>

• ref can be used for example auto-focus the elements immediately after render.

class Component extends React.PureComponent<Props> {

  componentDidMount() {
    this.ref.current && this.ref.current.focus();
  }

  ref: { current: React$ElementRef<*> | null } = React.createRef();

  render() {
    return (
      <InputField ref={this.ref} />
    )
  }
}

Accessibility

• For special cases you can use your own, detached label. Simply like this:

<label for="NICEID">Content</label>
<InputField
  id="NICEID"
/>