InputField is a self-contained form field from @rokkit/forms. It wraps
a label, the input element, an optional description, and a validation message — all driven by
data attributes that themes style.
Live Demo
Used on your public profile
States
Pass a status prop ('pass' or 'fail') to show validation
state. The optional message prop shows helper text below the field.
Enter a valid email address
Looks good!
svelte
Highlighting code...
Input Types
The type prop maps to standard HTML input types plus 'textarea' and 'integer' (number with step="1").
With Description
Use description to show helper text below the field (always visible).
Lowercase letters, numbers, and underscores only.
Props
| Prop | Type | Description |
|---|---|---|
name | string | HTML name attribute (required) |
label | string | Field label text |
type | string | Input type: text, email, password, number, integer, textarea |
value | any | Bindable field value |
placeholder | string | Placeholder text |
status | 'pass' | 'fail' | Validation state |
message | string | {state, text} | Helper or error message below field |
description | string | Persistent helper text |
disabled | boolean | Disables the field |
icon | string | Icon class to show inside the input |