A text input with prefix/suffix snippets, sizes, and an invalid state.
DefaultInvalidDisabledWith affixes
<TextInput bind:value type="email" placeholder="ana@example.com" />Installation
pnpm add @chanrg/4uiImport the stylesheet once, at the root of your app:
import '@chanrg/4ui/styles.css';Usage
import { TextInput } from '@chanrg/4ui';<TextInput bind:value type="email" placeholder="ana@example.com" />API reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string ($bindable) | '' | Input value. |
type | text | email | password | number | search | url | tel | text | Input type. |
size | sm | md | lg | md | Control height. |
invalid | boolean | false | Error styling + aria-invalid. |
prefix / suffix | Snippet | — | Leading/trailing adornments (icons, units). |
CSS variables
| Variable | Description |
|---|---|
--4ui-surface | Primary component surface. |
--4ui-text | Primary foreground color. |
--4ui-border | Default control and panel border. |
Accessibility
- Composes with Field for label/description/error wiring via the id snippet.