Input

Input includes label, helper/error messages, and state transitions.

Quick Preview

Compact

Email is required

Disabled

Preset Examples

Code

<Input variant="default" uiSize="md" placeholder="Default input" />
<Input variant="filled" uiSize="sm" placeholder="Compact filled input" />
<Input variant="ghost" uiSize="lg" placeholder="Search products..." />
<Input variant="flushed" label="Username" placeholder="@yourname" />
<Input variant="default" error="Email is required" />

Interactive Playground

We'll never share your email.

Radius (10px)required (show red *)isDisabled

Code

import { Input } from "@altech-ui/react";

export function Example() {
  return (
    <Input
      label={"Email"}
      placeholder={"name@example.com"}
      variant="default"
      uiSize="md"
      helperText={"We'll never share your email."}
      
      required
      
      style={{ borderRadius: "10px" }}
    />
  );
}

Input Types

Work Email

Use your company email.

Password

Min. 8 characters

Phone

Website

OTP Code

Code

<Input label="Work Email" type="email" required />
<Input label="Search" type="search" variant="ghost" />
<Input label="Phone" type="tel" />
<Input label="Website" type="url" />
<Input label="OTP Code" type="number" uiSize="sm" />

Code

"use client"
 
import { useState } from "react"
import { Input } from "@altech-ui/react"
 
export function PasswordField() {
  const [showPassword, setShowPassword] = useState(false)
 
  return (
    <Input
      label="Password"
      type={showPassword ? "text" : "password"}
      required
      endAdornment={
        <button type="button" onClick={() => setShowPassword((prev) => !prev)}>
          {showPassword ? "Hide" : "Show"}
        </button>
      }
    />
  )
}

Usage

Code

import { Input } from "@altech-ui/react"
 
<Input placeholder="Enter your email" />
<Input label="Email" placeholder="email@example.com" />
<Input variant="filled" uiSize="sm" placeholder="Compact input" />
<Input error="Email is required" />
<Input isDisabled />

Props

label?: string
placeholder?: string
error?: string
helperText?: string
isDisabled?: boolean
variant?: default | filled | flushed | ghost
uiSize?: sm | md | lg
fullWidth?: boolean
className?: string
Native input props