Input

Basic Input

<Input label="Label" />
<Input label="Label" />

Description and placeholder

Use the optional description for hints or additional information about what to fill out, and placeholder prop for an example text.

<Input label="Label" description="Description" placeholder="Placeholder" />
<Input label="Label" description="Description" placeholder="Placeholder" />

Value state

Control the input text by using value and onChange props just like you would on a native <input type='text'>.

See sandbox at bottom of this page.

Also see the official react input docs

Icon

Icons can be placed inside the input by using the icon prop.

<Input label='Home address' icon={faHome} />
<Input label='Favorite spa' icon={faSpa} />
<Input label='Home address' icon={faHome} />
<Input label='Favorite spa' icon={faSpa} />

Small

Use the small prop to decrease the input height from 40px to 32px to match the height of <Button small>.

<Input label="Small input" small />
<Input label='Favorite cheese' small icon={faCheese} placeholder="Brie" />
<Input label="Small input" small />
<Input label='Favorite cheese' small icon={faCheese} placeholder="Brie" />

Search

Icon can be positioned to the right by using the prop rightIcon, use this when the icon is clickable.

Adding iconButton to the component will style the icon as a button. Provide onIconClick, for a click handler on the icon.

If you want to display a button that will clear the value from the component, add clearable.

Also see loading spinner section.

<Input
  placeholder="Search button"
  label="Search"
  rightIcon
  iconButton
  icon={faSearch} // import { faSearch } from "@fortawesome/free-solid-svg-icons";
  onIconClick={() => /* handle icon button click */}
  clearable
/>
<Input
  placeholder="Search button"
  label="Search"
  rightIcon
  iconButton
  icon={faSearch} // import { faSearch } from "@fortawesome/free-solid-svg-icons";
  onIconClick={() => /* handle icon button click */}
  clearable
/>

Search without button

If your project requires a search field with instant results, you can use either the default input or input with border, without the button and combine with a left-aligned search icon. Add a placeholder text to indicate what the user is supposed to search for.

import { useState } from "react";
import { faSearch } from "@fortawesome/free-solid-svg-icons";
import Input from "@intility/bifrost-react/Input";
import AutoCol from "@intility/bifrost-react/AutoCol";

export default function SearchInputDemo() {
  const [value1, setValue1] = useState("");
  const [value2, setValue2] = useState("");
  const [value3, setValue3] = useState("");

  return (
    <AutoCol>
      <Input
        placeholder="Filter"
        label="search"
        hideLabel
        clearable
        icon={faSearch}
        value={value1}
        onChange={(e) => setValue1(e.target.value)}
      />

      <Input
        placeholder="Search"
        label="search"
        hideLabel
        clearable
        icon={faSearch}
        value={value2}
        onChange={(e) => setValue2(e.target.value)}
        onIconClick={() => console.log("search")}
        rightIcon
      />

      <Input
        placeholder="Search button"
        label="search"
        hideLabel
        icon={faSearch}
        clearable
        value={value3}
        onChange={(e) => setValue3(e.target.value)}
        onIconClick={() => console.log("search")}
        iconButton
        rightIcon
      />
    </AutoCol>
  );
}

Validation and feedback

Input fields can have different states. Use feedback to provide additional information.

Use 'warning' when user value is missing or invalid. If user ignores 'warning' and tries to submit form, use 'alert'. 'success' is used in live validation. Example: to verify that the preferred username is available.

<Input label='Success' state='success' />
<Input label='Warning' state='warning' feedback='Missing value' />
<Input label='Alert' state='alert' feedback='Invalid value' />
<Input label='Success' state='success' />
<Input label='Warning' state='warning' feedback='Missing value' />
<Input label='Alert' state='alert' feedback='Invalid value' />

Required or optional

Inputs can be made required or optional, with or without label:

• Default: optional, without label
• required prop: required, labelled
• optional prop: optional, labelled
• requiredNoLabel prop: required, without label

<Input label="Name" />
<Input label="Name" required />
<Input label="Name" optional />
<Input label="Name" requiredNoLabel />
<Input label="Name" />
<Input label="Name" required />
<Input label="Name" optional />
<Input label="Name" requiredNoLabel />

The idea is to mark as few inputs in a form as possible, so if there are mostly required inputs, only label the optional ones, and vice versa.

See Form design for examples.

Read only

A readOnly input field is not editable, and gets a "lock" icon next to its label. It is useful for displaying information that can be copied, that should not be changed by the user, but still needs to be visible.

<Input readOnly label="Name" value="This is read-only" />
<Input readOnly label="Name" value="This is read-only" />

Disabled

A disabled input field cannot be edited, and gets a "lock" icon next to its label. Be aware that a disabled input field will not be submitted with the form, nor be read by a screen reader.

<Input disabled label="Name" placeholder="This is disabled" />
<Input disabled label="Name" placeholder="This is disabled" />

Loading spinner

The loading prop displays a loading spinner on the right hand side of the input.

<Input loading label="Name" />
<Input loading label="Name" />

For inputs that have an icon, the icon will be replaced by the spinner.

Loading state does not make the input disabled, nor does it deactivate onIconClick.

Hide label

Providing a label prop to <Input /> is required, but you can hide it with hideLabel prop. The value of label will then be passed as aria-label to preserve accessibility.

<Input label="Favorite pet" hideLabel />
<Input label="Favorite pet" hideLabel />

Autocomplete

We have disabled autoComplete by default, but can be re-enabled with autoComplete='on'.

<Input label="Name" autoComplete="on" />
<Input label="Name" autoComplete="on" />

Sandbox

import { useState } from "react";
import Input from "@intility/bifrost-react/Input";
import Button from "@intility/bifrost-react/Button";

export default function InputDemo() {
  const [value, setValue] = useState("Some text");

  return (
    <div className="bf-content">
      <Input
        label="Input with controlled state"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
      <p>Input value: {value}</p>
      <Button onClick={() => setValue("Some other text")}>
        Set value to 'Some other text'
      </Button>
    </div>
  );
}