input

import { Input } from "woly";

Input is a field to accept data from the user. Input is used to create form fields that accept user input. They typically appear in forms and dialogs.

Inputs requiring certain data formats such as numbers, e-mail addresses or passwords are declared accordingly. This makes it easier for the user to enter information using a virtual keyboard.

When a input is active or contains an error, the input’s border color and thickness vary.

Placeholder text (Hint text)

Placeholder text rests in the input field until the user starts entering text. It may contain an action or an example, such as a phone number or email address.

Helper text

Helper text gives context about a field’s input, such as how the input will be used.

It should be visible either persistently or only on focus.

Specs:

  • Left justified
  • On a single line if possible, or with text wrapping (if multiple lines)

Error message

When input isn’t accepted, text fields can display an error message below the input line, with instructions on how to fix the error. Until the error is fixed, the error replaces the helper text.

An error message should appear on a single line, if possible.

##Character or word counter

Use character or word counters where there is a character or word limit.

Specs:

  • Right justified
  • Displayed as a ratio of characters used, and the character limit (formatted as: characters used / character limit)

Example

<Playground>
  <Form autoComplete="false">
    <Input
      name="name"
      onChange={(event) => console.info('On input change')}
      placeholder="Enter your name here"
      type="text"
      priority="default"
    />
  </Form>
</Playground>

Disabled

Disabled text fields are uneditable. They have less opacity so that they appear less tappable.

<Playground direction="vertical">
  <Form autoComplete="false">
    <Input
      disabled
      name="name"
      onChange={(event) => console.info('On input change')}
      placeholder="Enter your name here"
      type="text"
      priority="primary"
    />
    <Input
      disabled
      leftIcon={<IconInfo />}
      name="name"
      onChange={(event) => console.info('On input change')}
      placeholder="Enter your name here"
      type="text"
      priority="primary"
    />
    <Input
      disabled
      leftIcon={<IconInfo />}
      name="name"
      onChange={(event) => console.info('On input change')}
      value="Maria Ivanova"
      type="text"
      priority="primary"
    />
  </Form>
</Playground>

Icons

Inputs can be combined with an icon on the left side or the right. To use icons on both sides is not recommended.

<Playground direction="vertical" size="L">
  <Form autoComplete="false">
    <Input
      leftIcon={<IconInfo />}
      type="text"
      name="name"
      placeholder="Enter your name here"
      priority="primary"
      onChange={(event) => console.info('On input change')}
    />
    <Input
      type="text"
      name="name"
      placeholder="Enter your name here"
      priority="primary"
      onChange={(event) => console.info('On input change')}
      rightIcon={<IconInfo />}
    />
    <Input
      leftIcon={<IconInfo />}
      type="text"
      name="name"
      placeholder="Enter your name here"
      priority="primary"
      onChange={(event) => console.info('On input change')}
      rightIcon={<IconInfo />}
    />
  </Form>
</Playground>

Icons can also be touch targets for nested components.

<Playground size="L" direction="vertical">
  <Form autoComplete="false">
    <Input
      rightIcon={
        <block.S>
          <ButtonIcon
            icon={<IconInfo />}
            onClick={() => console.info('ButtonIcon clicked')}
            priority="primary"
          />
        </block.S>
      }
      type="text"
      name="name"
      placeholder="Enter your name here"
      onChange={(event) => console.info('On input change')}
      priority="primary"
    />
    <Input
      leftIcon={<IconInfo />}
      type="text"
      name="name"
      placeholder="Enter your name here"
      onChange={(event) => console.info('On input change')}
      priority="primary"
      rightIcon={
        <block.S>
          <ButtonIcon
            icon={<IconInfo />}
            onClick={() => console.info('ButtonIcon clicked')}
            priority="primary"
          />
        </block.S>
      }
    />
  </Form>
</Playground>

Priorities

Primary and secondary priorities should be used to focus user attention.

<Playground direction="vertical">
  <Form autoComplete="false">
    <Input
      leftIcon={<IconInfo />}
      name="name"
      onChange={(event) => console.info('On input change')}
      placeholder="Primary input"
      type="text"
      value="Primary"
      priority="primary"
    />
    <Input
      leftIcon={<IconInfo />}
      type="text"
      name="name"
      value="Secondary"
      placeholder="Secondary input"
      priority="secondary"
      onChange={(event) => console.info('On input change')}
    />
  </Form>
</Playground>

Error priority can be used to focus user attention on error.

<Playground>
  <Form autoComplete="false">
    <Input
      leftIcon={<IconInfo />}
      name="name"
      onChange={(event) => console.info('On input change')}
      placeholder="Error input"
      type="text"
      priority="danger"
    />
  </Form>
</Playground>

Sizes

Size is controlled by the component-level block property, not from the props.

<Playground direction="vertical">
  <Form autoComplete="false">
    <Input
      disabled
      name="name"
      onChange={(event) => console.info('On input change')}
      placeholder="Enter your name here"
      type="text"
      priority="primary"
    />
    <Input
      disabled
      leftIcon={<IconInfo />}
      name="name"
      onChange={(event) => console.info('On input change')}
      placeholder="Enter your name here"
      type="text"
      priority="primary"
    />
  </Form>
</Playground>

Icons

Inputs can be combined with an icon on the left side or the right. To use icons on both sides is not recommended.

<Playground direction="vertical" size="L">
  <Form autoComplete="false">
    <Input
      leftIcon={<IconInfo />}
      type="text"
      name="name"
      placeholder="Enter your name here"
      priority="primary"
      onChange={(event) => console.info('On input change')}
    />
    <Input
      type="text"
      name="name"
      placeholder="Enter your name here"
      priority="primary"
      onChange={(event) => console.info('On input change')}
      rightIcon={<IconInfo />}
    />
    <Input
      leftIcon={<IconInfo />}
      type="text"
      name="name"
      placeholder="Enter your name here"
      priority="primary"
      onChange={(event) => console.info('On input change')}
      rightIcon={<IconInfo />}
    />
  </Form>
</Playground>

Icons can also be touch targets for nested components.

<Playground size="L" direction="vertical">
  <Form autoComplete="false">
    <Input
      rightIcon={
        <block.S>
          <ButtonIcon
            icon={<IconInfo />}
            onClick={() => console.info('ButtonIcon clicked')}
            priority="primary"
          />
        </block.S>
      }
      type="text"
      name="name"
      placeholder="Enter your name here"
      onChange={(event) => console.info('On input change')}
      priority="primary"
    />
    <Input
      leftIcon={<IconInfo />}
      type="text"
      name="name"
      placeholder="Enter your name here"
      onChange={(event) => console.info('On input change')}
      priority="primary"
      rightIcon={
        <block.S>
          <ButtonIcon
            icon={<IconInfo />}
            onClick={() => console.info('ButtonIcon clicked')}
            priority="primary"
          />
        </block.S>
      }
    />
  </Form>
</Playground>

Priorities

Primary and secondary priorities should be used to focus user attention.

<Playground direction="vertical">
  <Form autoComplete="false">
    <Input
      leftIcon={<IconInfo />}
      name="name"
      onChange={(event) => console.info('On input change')}
      placeholder="Primary input"
      type="text"
      value="Primary"
      priority="primary"
    />
    <Input
      leftIcon={<IconInfo />}
      type="text"
      name="name"
      value="Secondary"
      placeholder="Secondary input"
      priority="secondary"
      onChange={(event) => console.info('On input change')}
    />
  </Form>
</Playground>

Error priority can be used to focus user attention on error.

<Playground>
  <Form autoComplete="false">
    <Input
      leftIcon={<IconInfo />}
      name="name"
      onChange={(event) => console.info('On input change')}
      placeholder="Error input"
      type="text"
      value="Error"
      priority="danger"
    />
  </Form>
</Playground>

Sizes

Size is controlled by the component-level block property, not from the props.

<Playground direction="vertical">
  <Form autoComplete="false">
    <block.S>
      <Input
        name="name"
        onChange={(event) => console.info('On input change')}
        placeholder="Enter your name here"
        type="text"
        priority="primary"
      />
    </block.S>
    <block.M>
      <Input
        name="name"
        onChange={(event) => console.info('On input change')}
        placeholder="Enter your name here"
        type="text"
        priority="primary"
      />
    </block.M>
    <block.L>
      <Input
        name="name"
        onChange={(event) => console.info('On input change')}
        placeholder="Enter your name here"
        type="text"
        priority="primary"
      />
    </block.L>
    <block.XL>
      <Input
        name="name"
        onChange={(event) => console.info('On input change')}
        placeholder="Enter your name here"
        type="text"
        priority="primary"
      />
    </block.XL>
    <block.H>
      <Input
        name="name"
        onChange={(event) => console.info('On input change')}
        placeholder="Enter your name here"
        type="text"
        priority="primary"
      />
    </block.H>
  </Form>
</Playground>

Container

Inputs can be placed inside the container. Input width is equal to container size.

<Playground direction="vertical">
  <Form autoComplete="false">
    <block.L>
      <Input
        leftIcon={<IconInfo />}
        type="text"
        name="name"
        value="Primary"
        placeholder="Enter your name here"
        priority="primary"
        onChange={(event) => console.info('On input change')}
      />
    </block.L>
    <block.L>
      <Input
        leftIcon={<IconInfo />}
        type="text"
        name="name"
        placeholder="Enter your name here"
        onChange={(event) => console.info('On input change')}
        priority="primary"
        rightIcon={
          <block.S>
            <ButtonIcon
              icon={<IconInfo />}
              onClick={() => console.info('ButtonIcon clicked')}
              priority="primary"
            />
          </block.S>
        }
      />
    </block.L>
  </Form>
</Playground>

Input with Button

<Playground>
  <Input
    leftIcon={<IconInfo />}
    type="text"
    name="name"
    placeholder="Enter your name here"
    onChange={(event) => console.info('On input change')}
    variant="primary"
    rightIcon={
      <Button
        icon={<IconSearch />}
        onClick={() => alert('Hi!')}
        text="Just a button"
        variant="primary"
      />
    }
  />
</Playground>

Props

NameTypeDefaultDescription
autocomplete"on" ӏ "off""off"Autocomplete attribute
disabledbooleanfalseHTML disabled attribute
leftIconReact.ReactNodenullComponent to show on the left side of the text (ex.: Icon)
namestringName attribute specifies a name of the input
onChangeReact.EventHandler<React.SyntheticEvent>;On change event handler.
placeholderstring''CSS pseudo-element represents the placeholder text
prioritystring'secondary'Priority prop to style Input component
rightIconReact.ReactNodenullComponent to show on the right side of the text (ex.: Icon)
type"text" ӏ "password" ӏ "email"textHTML type of the input
valueHTMLInputElement['value']nullValue of input field
...HTMLInputElement{}Other props are inherited from HTMLInputElement