Input

Usage

import { Input } from '@acronis-platform/shadcn-uikit';

Basic

A simple text input field.

View source

import { Input } from '@acronis-platform/shadcn-uikit/react';

export function InputBasic() {
  return (
    <div className="space-y-4">
      <Input placeholder="Enter text..." />
      <Input placeholder="With default value" defaultValue="Default value" />
    </div>
  );
}

Types

Input fields for different data types (email, password, number, etc.).

View source

import { Input } from '@acronis-platform/shadcn-uikit/react';

export function InputTypes() {
  return (
    <div className="space-y-4">
      <Input type="text" placeholder="Text input" />
      <Input type="email" placeholder="Email input" />
      <Input type="password" placeholder="Password input" />
      <Input type="number" placeholder="Number input" />
      <Input type="tel" placeholder="Phone input" />
      <Input type="url" placeholder="URL input" />
    </div>
  );
}

With labels

Input fields paired with labels.

Password

View source

import { Input } from '@acronis-platform/shadcn-uikit/react';

export function InputWithLabels() {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <label htmlFor="email" className="text-sm font-medium text-[#243143]">
          Email
        </label>
        <Input id="email" type="email" placeholder="Enter your email" />
      </div>
      <div className="space-y-2">
        <label
          htmlFor="password"
          className="text-sm font-medium text-[#243143]"
        >
          Password
        </label>
        <Input
          id="password"
          type="password"
          placeholder="Enter your password"
        />
      </div>
    </div>
  );
}

With icons

Input fields with leading or trailing icons.

View source

import { Input } from '@acronis-platform/shadcn-uikit/react';
import { LockIcon, MailIcon, SearchIcon } from '@acronis-platform/shadcn-uikit';
export function InputWithIcons() {
  return (
    <div className="space-y-4">
      <div className="relative">
        <MailIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
        <Input className="pl-10" type="email" placeholder="Email" />
      </div>
      <div className="relative">
        <LockIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
        <Input className="pl-10" type="password" placeholder="Password" />
      </div>
      <div className="relative">
        <SearchIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
        <Input className="pl-10" type="search" placeholder="Search..." />
      </div>
    </div>
  );
}

Disabled state

Disabled input fields that cannot be edited.

View source

import { Input } from '@acronis-platform/shadcn-uikit/react';

export function InputDisabled() {
  return (
    <div className="space-y-4">
      <Input placeholder="Disabled input" disabled />
      <Input
        placeholder="Disabled with value"
        defaultValue="Cannot edit this"
        disabled
      />
    </div>
  );
}

Required

Input fields marked as required.

Name *

Email *

View source

import { Input } from '@acronis-platform/shadcn-uikit/react';

export function InputRequired() {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <label
          htmlFor="required-name"
          className="text-sm font-medium text-[#243143]"
        >
          Name <span className="text-red-500">*</span>
        </label>
        <Input
          id="required-name"
          type="text"
          placeholder="Enter your name"
          required
        />
      </div>
      <div className="space-y-2">
        <label
          htmlFor="required-email"
          className="text-sm font-medium text-[#243143]"
        >
          Email <span className="text-red-500">*</span>
        </label>
        <Input
          id="required-email"
          type="email"
          placeholder="Enter your email"
          required
        />
      </div>
    </div>
  );
}

With helper text

Input fields with descriptive helper text below.

Username

Choose a unique username

Phone Number

Include country code

View source

import { Input } from '@acronis-platform/shadcn-uikit/react';

export function InputWithHelper() {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <label
          htmlFor="username"
          className="text-sm font-medium text-[#243143]"
        >
          Username
        </label>
        <Input id="username" type="text" placeholder="Enter username" />
        <p className="text-xs text-gray-500">Choose a unique username</p>
      </div>
      <div className="space-y-2">
        <label htmlFor="phone" className="text-sm font-medium text-[#243143]">
          Phone Number
        </label>
        <Input id="phone" type="tel" placeholder="+1 (555) 000-0000" />
        <p className="text-xs text-gray-500">Include country code</p>
      </div>
    </div>
  );
}

Error state

Input fields displaying validation errors.

Please enter a valid email address

Password

Password must be at least 8 characters

View source

import { Input } from '@acronis-platform/shadcn-uikit/react';

export function InputError() {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <label
          htmlFor="error-email"
          className="text-sm font-medium text-[#243143]"
        >
          Email
        </label>
        <Input
          id="error-email"
          type="email"
          placeholder="Enter your email"
          className="border-red-500 focus-visible:border-red-500"
        />
        <p className="text-xs text-red-500">
          Please enter a valid email address
        </p>
      </div>
      <div className="space-y-2">
        <label
          htmlFor="error-password"
          className="text-sm font-medium text-[#243143]"
        >
          Password
        </label>
        <Input
          id="error-password"
          type="password"
          placeholder="Enter your password"
          className="border-red-500 focus-visible:border-red-500"
        />
        <p className="text-xs text-red-500">
          Password must be at least 8 characters
        </p>
      </div>
    </div>
  );
}

Sizes

Input fields in different sizes.

View source

import { Input } from '@acronis-platform/shadcn-uikit/react';

export function InputSizes() {
  return (
    <div className="space-y-4">
      <Input className="h-10 text-sm" placeholder="Small input (40px)" />
      <Input placeholder="Default input (48px)" />
      <Input className="h-14 text-base" placeholder="Large input (56px)" />
    </div>
  );
}

In a form

Input integrated with form validation.

View source

import { useState } from 'react';
import { Input, Button } from '@acronis-platform/shadcn-uikit/react';
import { LockIcon, MailIcon } from '@acronis-platform/shadcn-uikit';
export function InputForm() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');

  return (
    <form
      className="space-y-4"
      onSubmit={(e) => {
        e.preventDefault();
        alert(`Form submitted!\nEmail: ${email}\nPassword: ${password}`);
      }}
    >
      <div className="space-y-2">
        <label
          htmlFor="form-email"
          className="text-sm font-medium text-[#243143]"
        >
          Email <span className="text-red-500">*</span>
        </label>
        <div className="relative">
          <MailIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
          <Input
            id="form-email"
            className="pl-10"
            type="email"
            placeholder="Enter your email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            required
          />
        </div>
      </div>
      <div className="space-y-2">
        <label
          htmlFor="form-password"
          className="text-sm font-medium text-[#243143]"
        >
          Password <span className="text-red-500">*</span>
        </label>
        <div className="relative">
          <LockIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
          <Input
            id="form-password"
            className="pl-10"
            type="password"
            placeholder="Enter your password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            required
          />
        </div>
      </div>
      <Button type="submit" className="w-full">
        Sign In
      </Button>
    </form>
  );
}

Search

A search-specific input with search icon.

View source

import { useState } from 'react';
import { Input } from '@acronis-platform/shadcn-uikit/react';
import { SearchIcon } from '@acronis-platform/shadcn-uikit';
export function InputSearch() {
  const [search, setSearch] = useState('');

  return (
    <div className="space-y-4">
      <div className="relative">
        <SearchIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
        <Input
          className="pl-10"
          type="search"
          placeholder="Search..."
          value={search}
          onChange={(e) => setSearch(e.target.value)}
        />
      </div>
      {search && (
        <p className="text-sm text-gray-600">
          Searching for: <strong>{search}</strong>
        </p>
      )}
    </div>
  );
}

Various types

A showcase of all available input type variants.

View source

import { Input } from '@acronis-platform/shadcn-uikit/react';
import {
  CalendarIcon,
  PhoneIcon,
  UserIcon,
} from '@acronis-platform/shadcn-uikit';
import { CreditCardIcon } from '../icons/missing-icons';
export function InputVariousTypes() {
  return (
    <div className="space-y-4">
      <div className="space-y-2">
        <label className="text-sm font-medium text-[#243143]">Full Name</label>
        <div className="relative">
          <UserIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
          <Input className="pl-10" type="text" placeholder="John Doe" />
        </div>
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium text-[#243143]">Phone</label>
        <div className="relative">
          <PhoneIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
          <Input className="pl-10" type="tel" placeholder="+1 (555) 000-0000" />
        </div>
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium text-[#243143]">
          Credit Card
        </label>
        <div className="relative">
          <CreditCardIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
          <Input
            className="pl-10"
            type="text"
            placeholder="1234 5678 9012 3456"
          />
        </div>
      </div>
      <div className="space-y-2">
        <label className="text-sm font-medium text-[#243143]">Date</label>
        <div className="relative">
          <CalendarIcon className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" />
          <Input className="pl-10" type="date" />
        </div>
      </div>
    </div>
  );
}

The Input component extends all standard HTML <input> element props (React.ComponentProps<'input'>) with consistent styling. Pass type, placeholder, disabled, value, onChange, and all other native input attributes directly.

Edit on GitHub

Input

Usage

Basic

Types

With labels

With icons

Disabled state

Required

With helper text

Error state

Sizes

In a form

Search

Various types

API Reference

On this page