Input

The Input component is used for text input fields with support for labels, validation, icons, loading states, and more. It's a highly configurable component that integrates with form systems.

tsx

import { Input } from "@arkyn/components";

Basic usage

Basic usage of an input requires a name property.

tsx

<Input name="basic-input" placeholder="Enter something..." />

Sizes

The available sizes are md and lg. Each size offers a different height and padding to suit your layout needs.

tsx

<Input name="input-md" placeholder="Medium size" size="md" />
<Input name="input-lg" placeholder="Large size" size="lg" />

Variants

The available variants are solid, outline, and underline. Each variant offers a different visual style to suit your interface design.

tsx

<Input name="input-solid" placeholder="Solid variant" variant="solid" />
<Input name="input-outline" placeholder="Outline variant" variant="outline" />
<Input name="input-underline" placeholder="Underlined variant" variant="underline" />

Inputs with labels

Labels help identify the purpose of the field and can include an asterisk to indicate required fields.

Username

tsx

<Input name="username" label="Username" placeholder="Enter your username" />

Inputs with Icons

Inputs can include icons on the left or right to provide additional visual context.

Left-side icon

tsx

<Input
  name="search"
  label="Search"
  placeholder="Type to search..."
  leftIcon={Search}
/>

Right-side icon

Filter search

tsx

<Input
  name="filter-search"
  label="Filter search"
  placeholder="Type and use the filter..."
  rightIcon={Filter}
/>

Prefix and suffix

Use prefix and suffix to add text or fixed icons at the beginning or end of the input.

With prefix

My wallet

tsx

<Input name="money" label="My wallet" placeholder="100.00" prefix="R$" />

With suffix

Your birthday month

tsx

<Input name="day" label="Your birthday month" suffix={Calendar1} />

Input Types

The component supports all HTML input types, allowing for different types of data entry.

Password

Phone

tsx

<Input
  name="email-type"
  label="Email"
  type="email"
  placeholder="user@example.com"
  leftIcon={Mail}
/>

<Input
  name="password-type"
  label="Password"
  type="password"
  placeholder="Enter your password"
  leftIcon={Lock}
/>

<Input
  name="tel-type"
  label="Phone"
  type="tel"
  placeholder="(11) 99999-9999"
  leftIcon={Phone}
/>

Input States

The component supports different states, such as disabled, read-only, and loading.

Disabled Input

The disabled state prevents any user interaction with the field and prevents data from being submitted through a form.

Disabled field

tsx

<Input
  name="disabled-input"
  label="Disabled field"
  placeholder="This field is disabled"
  disabled
/>

Read-only input

The read-only state allows the user to view the field value but cannot edit it. Unlike the disabled state, the value can be selected and copied, and field data can be submitted via a form.

Read-only field

tsx

<Input
  name="readonly-input"
  label="Read-only field"
  value="This value cannot be edited"
  readOnly
/>

Loading State

The loading state displays a spinner and automatically disables input. The spinner appears on the left by default, or on the right if there is a rightIcon.

Loading (left)

Loading (right)

tsx

<Input
  name="loading-left"
  label="Loading (left)"
  placeholder="Loading..."
  isLoading
/>
<Input
  name="loading-right"
  label="Loading (right)"
  placeholder="Loading..."
  rightIcon={Search}
  isLoading
/>

Validation and Errors

The component integrates with form validation systems and can display error messages. If an error message is provided via the errorMessage property, it will take precedence over messages from the form provider.

Customizable Forms

For forms, it is recommended to use the FormProvider which offers native integration with all form tools.

Please enter a valid email

tsx

<Input
  name="invalid-email"
  label="Email"
  placeholder="Enter your email"
  errorMessage="Please enter a valid email"
  leftIcon={Mail}
  showAsterisk
/>

Properties

name - string (required) Name of the field for form manipulation

label - string Label text to display above the input

value - string Field value

defaultValue - string Uncontrolled initial value of the field

errorMessage - string Error message to display below the input

isLoading - boolean (default: false) Controls the loading state with a spinner

size - "md" | "lg" (default: "md") Input size

variant - `"solid" | "outline" | "underline" (default: "solid") Visual variant of the input

prefix - string | LucideIcon Text or icon to display at the beginning of the input

suffix - string | LucideIcon Text or icon to display at the end of the input

showAsterisk - boolean Whether to display an asterisk in the label for required fields

leftIcon - LucideIcon Optional icon to display on the left side

rightIcon - LucideIcon Optional icon to display on the right side

Other properties

All other standard HTML properties of <input> are also supported, except size, prefix, and name.

Notes

Inputs of the hidden type are rendered with display: none
Icons are automatically resized based on the input size

On this page