AxInput provides text input fields with built-in label, hint text, error messaging, and validation state support. No need for separate form item wrappers.
Basic Usage
import { AxInput } from 'axmed-design-system'
function Example() {
return (
<AxInput
label="Email address"
placeholder="[email protected]"
hint="We will never share your email."
/>
)
}
With Label & Hint
Labels and hints are built into the component:
<AxInput
label="Product Code"
hint="Enter the 10-digit product code from the package"
placeholder="AMX-2024-001"
/>
Required Fields
Show a red asterisk next to the label:
The required prop only adds visual indication. Use HTML5 validation or form libraries for actual validation.
<AxInput size="sm" label="Small" placeholder="Small input" />
<AxInput size="md" label="Medium (default)" placeholder="Medium input" />
<AxInput size="lg" label="Large" placeholder="Large input" />
Validation States
Error State
<AxInput
label="Product Code"
error="Product code not found in catalogue"
defaultValue="AMX-99999"
allowClear
/>
error prop automatically sets the input border to red and displays the error message below.
Warning State
<AxInput
label="Quantity"
status="warning"
hint="Double-check this value before submitting"
defaultValue="100000"
/>
With Icons
Prefix Icon
import { SearchOutlined } from '@ant-design/icons'
<AxInput
label="Search"
prefix={<SearchOutlined />}
placeholder="Search suppliers..."
/>
Suffix Text
<AxInput
label="Price"
prefix="$"
suffix="USD"
placeholder="0.00"
/>
Disabled State
<AxInput
label="Account holder"
hint="Read-only"
defaultValue="PharmaCorp Ltd"
disabled
/>
Clear Button
Show a clear icon when the input has a value:
Common Patterns
Form Group
<div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
<AxInput
label="Email address"
hint="We will never share your email."
placeholder="[email protected]"
required
allowClear
/>
<AxInput
label="Quantity"
hint="Must be between 1 and 10,000 units"
placeholder="Enter quantity"
suffix="units"
status="warning"
/>
<AxInput
label="Product Code"
error="Product code not found in catalogue"
defaultValue="AMX-99999"
allowClear
/>
</div>
Search Input
import { SearchOutlined } from '@ant-design/icons'
<AxInput
prefix={<SearchOutlined />}
placeholder="Search medications..."
allowClear
/>
Numeric Input with Units
<AxInput
label="Lead Time"
placeholder="0"
suffix="days"
type="number"
/>
Currency Input
<AxInput
label="Unit Price"
prefix="$"
suffix="USD"
placeholder="0.00"
type="number"
step="0.01"
/>
Label text displayed above the input
Helper text displayed below the input (neutral gray)
Error message displayed below the input in red. Also sets status="error"
Show red asterisk next to label (visual only, does not add validation)
Input size: sm, md, or lg
Validation status: error or warning
Show clear button when input has value
Icon or text displayed before the input value
Icon or text displayed after the input value