Input
Default
Icon
You can append or prepend an icon with icon prop or named icon slot. In order to customize you own icon pack please refer to icons section.
Events and attrs
All HTML input events and attrs can be used. for example type="password":
Label & placeholder
Before & After slot
Tag
tag prop can both be and html element as string or a Component. For example when you want to render textarea instead of input you can use tag="texarea".
Or when you want to pass some directives to the input element, since input is nested inside RInput, you can create you own input component and pass it down as tag for example: <RInput v-model="something" :tag="MyInputWithDirectives" />.
States
You can modify state of input using boolean props of error or message. Also accepts message prop.
Color
Available values are prm, yellow, red, green, any HEX or RGBA/RGB value.
Props
| Name | Type | Required | Default Value | Description |
|---|---|---|---|---|
| modelValue | string | No | undefined | The value of the input element. |
| label | string | No | undefined | The label displayed above the input element. |
| icon | string | No | undefined | The name of the icon to be displayed inside the input element. |
| placeholder | string | No | undefined | The text displayed inside the input element before the user types anything. |
| message | string | No | undefined | The message displayed below the input element. |
| iconAfter | boolean | No | false | If true, displays the icon after the input element instead of before. |
| sharp | boolean | No | false | If true, adds sharp corners to the input element. |
| color | string | No | undefined | The color of the input element. |
| disabled | boolean | No | false | If true, disables the input element. |
| error | boolean | No | false | If true, adds error styling to the input element. |
| containerClass | string | No | undefined | Additional class name(s) to apply to the container element of the input component. |
| tag | string | Component | No | undefined | The component to be rendered instead of input. |
Events
All events/attrs passed down will be passed to input component.