Skip to main content

​
Overview

The AxInput component provides a text input field with integrated label, helper text, and error messaging. The AxSearchInput variant adds search-specific features like debounced callbacks and a search icon.

​
Import

import { AxInput, AxSearchInput } from "axmed-design-system"
import type { AxInputProps, AxSearchInputProps, AxInputSize } from "axmed-design-system"

​
AxInput Props

​
size
AxInputSize
default:"'md'"
Preset input sizes:
  • "sm" - Small input
  • "md" - Medium input (default)
  • "lg" - Large input
​
label
string
Label text displayed above the input field
​
hint
string
Helper text displayed below the input in neutral color. Useful for providing additional context or instructions.
​
error
string
Error message displayed below the input in red. Automatically sets status="error" and aria-invalid on the input.
​
required
boolean
default:"false"
Whether the field is required. Adds a red asterisk to the label. Note: This does NOT add HTML native validation.
​
value
string
Controlled input value
​
defaultValue
string
Uncontrolled default value
​
placeholder
string
Placeholder text shown when input is empty
​
disabled
boolean
default:"false"
Whether the input is disabled
​
readOnly
boolean
default:"false"
Whether the input is read-only
​
maxLength
number
Maximum character length
​
allowClear
boolean
default:"false"
Show clear button when input has value
​
prefix
React.ReactNode
Content to display before the input (typically an icon)
​
suffix
React.ReactNode
Content to display after the input (typically an icon)
​
onChange
(e: React.ChangeEvent<HTMLInputElement>) => void
Callback fired when input value changes
​
onPressEnter
(e: React.KeyboardEvent<HTMLInputElement>) => void
Callback fired when Enter key is pressed
​
onBlur
(e: React.FocusEvent<HTMLInputElement>) => void
Callback fired when input loses focus
​
onFocus
(e: React.FocusEvent<HTMLInputElement>) => void
Callback fired when input gains focus
​
id
string
HTML id attribute. If not provided, an auto-generated id is used.
​
className
string
Additional CSS classes to apply
​
style
React.CSSProperties
Inline styles to apply

​
AxSearchInput Props

AxSearchInput extends AxInputProps with search-specific features:
​
onSearch
(value: string) => void
Called with the current search value after the debounce delay. If omitted, only onChange fires (standard controlled input behavior).
​
debounce
number
default:"300"
Debounce delay in milliseconds before onSearch fires. Prevents excessive API calls during typing.
​
allowClear
boolean
default:"true"
Show clear button. Defaults to true for search inputs.
​
placeholder
string
default:"'Search...'"
Placeholder text. Defaults to “Search…” for search inputs.
Note: AxSearchInput automatically includes a search icon prefix and cannot override the prefix or type props.

​
Type Definitions

​
AxInput

export type AxInputSize = "sm" | "md" | "lg"

export type AxInputProps = {
  /**
   * Preset sizes: "sm" (small), "md" (middle — default), "lg" (large).
   * Consistent with AxButton, AxModal, AxDrawer size APIs.
   */
  size?: AxInputSize

  /** Label displayed above the input. */
  label?: string

  /** Helper text displayed below the input (neutral). */
  hint?: string

  /**
   * Error message displayed below the input in red.
   * Also automatically sets `status="error"` on the input.
   */
  error?: string

  /**
   * Whether the field is required.
   * Adds a red asterisk to the label — does NOT add HTML native validation.
   */
  required?: boolean
} & Omit<AntInputProps, "size" | "required">

​
AxSearchInput

export type AxSearchInputProps = {
  /**
   * Called with the current search value after the debounce delay.
   * If omitted, only `onChange` fires (standard controlled input behaviour).
   */
  onSearch?: (value: string) => void

  /**
   * Debounce delay in ms before `onSearch` fires.
   * @default 300
   */
  debounce?: number
} & Omit<AxInputProps, "prefix" | "type">

​
Usage Examples

​
Basic Input

import { AxInput } from "axmed-design-system"
import { useState } from "react"

function Example() {
  const [value, setValue] = useState("")

  return (
    <AxInput
      label="Email Address"
      placeholder="Enter your email"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  )
}

​
With Helper Text

import { AxInput } from "axmed-design-system"

function Example() {
  return (
    <AxInput
      label="Password"
      type="password"
      hint="Must be at least 8 characters"
      required
    />
  )
}

​
With Error State

import { AxInput } from "axmed-design-system"
import { useState } from "react"

function Example() {
  const [email, setEmail] = useState("")
  const [error, setError] = useState("")

  const validate = (value: string) => {
    if (!value.includes("@")) {
      setError("Please enter a valid email address")
    } else {
      setError("")
    }
  }

  return (
    <AxInput
      label="Email"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      onBlur={(e) => validate(e.target.value)}
      error={error}
      required
    />
  )
}

​
With Icons

import { AxInput } from "axmed-design-system"
import { UserOutlined, LockOutlined } from "@ant-design/icons"

function Example() {
  return (
    <>
      <AxInput
        label="Username"
        prefix={<UserOutlined />}
        placeholder="Enter username"
      />
      <AxInput
        label="Password"
        type="password"
        prefix={<LockOutlined />}
        placeholder="Enter password"
      />
    </>
  )
}

​
Different Sizes

import { AxInput } from "axmed-design-system"

function Example() {
  return (
    <>
      <AxInput size="sm" placeholder="Small input" />
      <AxInput size="md" placeholder="Medium input" />
      <AxInput size="lg" placeholder="Large input" />
    </>
  )
}

​
Search Input

import { AxSearchInput } from "axmed-design-system"
import { useState } from "react"

function Example() {
  const [results, setResults] = useState([])

  const handleSearch = async (query: string) => {
    if (!query) {
      setResults([])
      return
    }
    const data = await searchAPI(query)
    setResults(data)
  }

  return (
    <AxSearchInput
      label="Search Products"
      onSearch={handleSearch}
      debounce={500}
    />
  )
}

​
Search with Controlled Value

import { AxSearchInput } from "axmed-design-system"
import { useState } from "react"

function Example() {
  const [searchQuery, setSearchQuery] = useState("")

  const handleSearch = (value: string) => {
    console.log("Searching for:", value)
    // Perform search API call
  }

  return (
    <AxSearchInput
      value={searchQuery}
      onChange={(e) => setSearchQuery(e.target.value)}
      onSearch={handleSearch}
      placeholder="Search anything..."
    />
  )
}

​
Search with Custom Debounce

import { AxSearchInput } from "axmed-design-system"

function Example() {
  return (
    <AxSearchInput
      label="Quick Search"
      onSearch={(value) => console.log(value)}
      debounce={100}
      hint="Results update as you type"
    />
  )
}

​
Accessibility

  • Automatic id generation for proper label association
  • ARIA attributes (aria-required, aria-invalid, aria-describedby) are automatically applied
  • Error messages are properly linked to inputs via aria-describedby
  • Required field indicator (asterisk) is marked with aria-hidden to prevent duplication

​
Related Components

  • AxInputOTP - For one-time password and verification code inputs
  • AxModal - Inputs are commonly used in modal forms
  • AxFilterBar - For complex search and filtering interfaces

Build docs developers (and LLMs) love

Get started for freeTalk to us