Input
Basic Usage
Loading...
Installation
pnpm add @corew500/uiUsage
import { Input } from "@corew500/ui/input"
<Input>Content</Input>Variants
inputVariants
| Axis | Values | Default |
|---|---|---|
| size | defaultsmlg | default |
Variants
CMS Integration
Loading...
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| type | enum | text | Input type - affects validation and mobile keyboard |
| inputMode | enum | — | Controls which keyboard to show on mobile devices Use this when you want a specific keyboard but different validation than the type provides Example: type="text" with inputMode="numeric" for credit card numbers |
| enterKeyHint | enum | — | Controls the label shown on the mobile Enter/Return key Example: "search" shows "Search", "send" shows "Send" |
| autoCapitalize | enum | — | Controls automatic text capitalization on mobile Example: "words" for names, "none" for emails |
| glow | enum | false | Enable mouse-tracking glow effect on hover |
| size | enum | default | — |
Accessibility
Keyboard Navigation
- Focus ring visible for keyboard navigation
Screen Readers
- Supports all standard input attributes (aria-label, aria-describedby, etc.)
- Invalid state indicated via `aria-invalid` with visual ring
Additional
- - Uses native input semantics via Base UI primitive
- Disabled state prevents interaction and reduces opacity
Localization
Translatable Content
- - Pass translated strings to `placeholder` prop
- Use `aria-label` for screen reader text when no visible label