Input

Imports#

• Input - main input component
• InputGroup - input group is a wrapper to hold InputGroupPrefix/Suffix
• InputPrefix - prefix of the input element
• InputSuffix - suffix of the input element
• InputGroupSuffix - prefix of the input group
• InputGroupPrefix - suffix of the input group

Usage#

Basic usage

Input Prefix/Suffix#

You can append or prepend any element inside input. By default we don't give spacing to the elements so you have to add spacing as needed.

InputPrefix is positioned absolutely within the input.

As you can see clicking on the input's prefix/suffix will focus the input, but that might not what you want in all scenarios if you want to render a button or something interactive. To disable this behaviour you can use allowPointerEvents

For example if you want to add a select inside the suffix you can do so like this:

InputGroup#

InputGroup is used to add addons before or after the Input component.

And by using InputGroupPrefix we can specify the prefix or suffix.

The main difference between InputGroupPrefix & InputPrefix is that:

• InputPrefix is positioned absolutely within the input.
• InputGroupPrefix is positioned adjacent to the input.

Unlike InputPrefix where you had to add allowPointerEvents to make the InputGroupPrefix interactive, in InputGroupPrefix you can directly pass any interactive components (eg: Button).

Here's a password input example using InputGroupSuffix to attach a toggle button.

Here's an example with all the components combined:

Integrations#

React Hook Form#

This example shows how to integrate renderlesskit Input with react-hook-form

Explore on CodeSandbox

Formik#

This example shows how to integrate renderlesskit Input with Formik

Explore on CodeSandbox

API Reference#

Input#

Input takes all the native HTMLInputElement props plus:

InputPrefix & InputSuffix#