Input
Text input with optional label, prefix/suffix slots, and a `search` variant. Forwards refs and all native `input` attributes.
Text input with optional label, prefix/suffix slots, and a search variant. Forwards refs and all native <input> attributes.
import { Input } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
error | Optional | string | undefined | — | Validation error message. When provided, displays error styling (red border) and the message below the input. |
label | Optional | string | undefined | — | Optional label displayed above the input |
prefix | Optional | React.ReactNode | — | Prefix element displayed before the input (left side) |
variant | Optional | "search" | "default" | undefined | 'default' | Variant of the input - `default`: Standard text input - `search`: Input with magnifying glass icon on the right |
size | Optional | InputSize | undefined | 'default' | Size of the input - `default`: padding 10px 12px, icon 16px - `medium`: padding 6px 12px, icon 12px |
wrapperClassName | Optional | string | undefined | — | Custom className for the root wrapper |
suffix | Optional | React.ReactNode | — | Suffix element displayed after the input (right side) |
Usage
Text input with label support, prefix/suffix slots, sizes, error state, and a search-icon variant.
Example
/** * Runnable example for Input. */import { useState } from 'react'import { Input } from '@tetherto/mdk-react-devkit'export const InputExample = () => { const [value, setValue] = useState('') return ( <div style={{ display: 'flex', flexDirection: 'column', gap: 16, maxWidth: 320 }}> <Input id="mac" label="MAC address" placeholder="AA:BB:CC:00:00:01" value={value} onChange={(e) => setValue(e.target.value)} /> <Input variant="search" placeholder="Search miners" /> <Input prefix="$" suffix="USD" placeholder="0.00" /> <Input label="Invalid" error="Must be a hex string" defaultValue="abc" /> </div> )}