Input

Inputs are used to collect user input.

Signature

Copy
import { Input } from "tabler-react-2";

<Input {...props}>{children}</Input>;

Props

Basic Usage

The Input component is used to collect user input.

Copy
<Input
  label="Input"
  placeholder="Type here..."
  value={"Starting value"}
  onInput={console.log}
/>

Labels and Placeholders

The Input component can be used to collect user input. The label and placeholder props are used to show a label and placeholder text in the input box. Traditionally, the label should describe the input, and the placeholder should provide a hint or an example. This way the user can still understand what a field is asking for even when the input is not empty.

Copy
<Input label="Your Name" placeholder="Johnny Appleseed" />

Input Types

The Input component can be used to collect different types of input. The type prop accepts a string value of any input type.

Copy
<Input
  label="Email input"
  placeholder="Type here..."
  type="email"
/>
<Input
  label="Password input"
  placeholder="Type here..."
  type="password"
/>
<Input
  label="Number input"
  placeholder="Type here..."
  type="number"
/>
<Input
  label="Date input"
  placeholder="Type here..."
  type="date"
/>
<Input
  label="Datetime input"
  placeholder="Type here..."
  type="datetime-local"
/>
<Input
  label="Month input"
  placeholder="Type here..."
  type="month"
/>
<Input
  label="Time input"
  placeholder="Type here..."
  type="time"
/>
<Input
  label="URL input"
  placeholder="Type here..."
  type="url"
/>

onChange, onInput and onRawChange callbacks

The Input component can call back to provided functions of onChange or onInput (which are the same), or onRawChange. The onChange and onInput callbacks are called with the new value as the argument, not the event. The onRawChange callback is called with the event as the argument.

Copy
<Input
  label="Input"
  placeholder="Type here..."
  value={"Starting value"}
  onChange={console.log}
  onInput={console.log}
  onRawChange={console.log}
/>

When this example is run, the following will be logged to the console:

Copy
"Starting value"
"Starting value"
{
  ...
  target: {
    ...
    value: "Starting value"
  }
}

Icon

You can supply an icon to the Input component. The icon prop accepts a node.

Copy
<Input
  label="Input"
  placeholder="Type here..."
  icon={<IconAerialLift />}
/>
<Input
  label="Input with icon on the right"
  placeholder="Type here..."
  icon={<IconAerialLift />}
  iconPos="trailing"
/>

Loader

You can supply a boolean value to the loader prop to show a spinner.

Copy
<Input label="Input" placeholder="Type here..." loader />

Separated

You can create seperate inputs by passing the separated prop. If you do this, you must also provide either an icon or loader, and use the appendedLinkOnClick or appendedLinkHref props to handle press events.

Copy
<Input
  label="Input"
  placeholder="Type here..."
  appendedLinkOnClick={() => alert("Clicked")}
  icon={<IconAerialLift size={18} />}
  separated
/>
<Input
  label="Input"
  placeholder="Type here..."
  appendedLinkOnClick={() => alert("Clicked")}
  icon={<IconAerialLift size={18} />}
  separated
/>

Prepended and Appended Text or Links

You can embed text or links in the input box by passing the prependedText or appendedText props. You can also pass an appendedLinkText prop to show a link in the text. The appendedLinkHref prop is used to set the href of the link. The appendedLinkOnClick prop is used to handle the click event of the link. You can only add event handlers to the appended link. If using links, you cannot also use a prependedText.

Copy
<Input
  label="Input"
  placeholder="Type here..."
  prependedText="https://"
  appendedText=".com"
/>
<Input
  label="Input"
  placeholder="Type here..."
  appendedLinkText="Link"
  appendedLinkHref="javascript:void(0);"
  appendedLinkOnClick={() => alert("Clicked")}
/>

Variants

You can pass a variant prop to the Input component to change the color of the input box.

Copy
<Input
  label="Input"
  placeholder="Type here..."
  variant="primary"
/>
<Input
  label="Input"
  placeholder="Type here..."
  variant="secondary"
/>
...

Invalid

There is not invalid prop. You can use the variant prop to change the color of the input box to indicate an invalid state.

Copy
<Input label="Input" placeholder="Type here..." variant="danger" />

Sizes

You can pass a size prop to the Input component to change the size of the input box.

Copy
<Input
  label="Input"
  placeholder="Type here..."
  size="sm"
/>
<Input
  label="Input"
  placeholder="Type here..."
  size="md"
/>
<Input
  label="Input"
  placeholder="Type here..."
  size="lg"
/>

Datalist (Autocomplete)

You can supply a list of items to the datalistItems prop to show a datalist. The datalistItems prop accepts an array of strings.

Copy
<Input
  label="Input"
  placeholder="Type here..."
  datalistItems={["One", "Two", "Three"]}
/>

This is different than a DropdownInput because the datalist is not exclusive, meaning the user can use a value that is not in the list.

Help Text

You can supply a helpText prop to the Input component to show a help text below the label.

Copy
<Input
  label="Input"
  placeholder="Type here..."
  helpText="This is some help text"
/>

Required

You can supply a required prop to the Input component to show a red asterisk next to the label.

Copy
<Input label="Input" placeholder="Type here..." required />

Hint

You can supply a hint prop to the Input component to show a hint below the input.

Copy
<Input label="Input" placeholder="Type here..." hint="This is a hint" />

Label Description

You can supply a labelDescription prop to the Input component to show a description to the right of the label.

Copy
<Input label="Input" placeholder="Type here..." labelDescription="37/100" />