Input
Text input in three sizes, with slots inside either end.
import
import { Input } from '@joshicodes/cock';Sizes and states
Leading and trailing
Anything in trailing stays clickable; leading is decoration only.
/
Behaviour
- `bind:value` keeps a string even for `type="number"`, because the component writes through the input event rather than the native binding.
- `leading` is not interactive; put a button in `trailing` if it needs to be clickable.
API
Read out of the component sources at build time, so it matches the version you installed.
Every component also takes class, merged
through tailwind-merge so your utility wins.
Props of Input
| Prop | Type | Default |
|---|---|---|
value bindable | string | '' |
size | 'sm' | 'md' | 'lg' | 'md' |
invalid | boolean | false |
class | string | — |
Anything else is forwarded to the underlying element, typed as HTMLInputAttributes.
Snippets of Input
| Snippet | Type | Default |
|---|---|---|
leading Icon or text rendered inside, before the input. | Snippet | — |
trailing Icon, button or text rendered inside, after the input. | Snippet | — |