primitives/@mihcm/ui·v0.21.0·stable
Input
Single-line text entry. Default + destructive variants, three sizes, optional leading/trailing icons. WCAG 2.1 AA out of the box (aria-invalid, aria-required, focus ring).
Props
The full prop API for Input. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.
| Prop | Type | Default | Description | Since |
|---|---|---|---|---|
variant | 'default' | 'destructive' | 'default' | Visual variant. `destructive` mirrors `invalid={true}`. Prefer `invalid` over toggling `variant` manually. | 0.2.0 |
size | 'sm' | 'md' | 'lg' | 'md' | Height + horizontal padding. `lg` is 44px to satisfy mobile touch targets. | 0.2.0 |
invalid | boolean | false | Sets `aria-invalid` (web) / `accessibilityState.invalid` (native) and applies destructive style. | 0.2.0 |
required | boolean | false | Sets `aria-required` (web). Visual asterisk is a consumer concern — pair with a `Label`. | 0.2.0 |
type | 'text' | 'email' | 'password' | 'tel' | 'url' | 'number' | 'search' | 'text' | Web `<input type>`. RN variant ignores this; use `keyboardType` separately. | 0.2.0 |
leadingIcon | ReactNode | — | Icon/element rendered inside the wrapper before the input. | 0.2.0 |
trailingIcon | ReactNode | — | Icon/element rendered inside the wrapper after the input. | 0.2.0 |
inputClassName | string | — | Forwarded to the underlying input element; use `className` for the wrapper. | 0.2.0 |
className | string | — | Wrapper className. Merged with `tailwind-merge`. | 0.2.0 |
Import
import { Input } from '@mihcm/ui/Input';