OrInput
An input element to take a users input
Basic
html
<or-input v-model="text" placeholder="Some text here" /><or-input v-model="text" placeholder="Some text here" />Icons ( Ornament uses RemixIcons )
html
<or-input v-model="text" placeholder="Some text here" beforeIcon="lock-line" afterIcon="restart-line" /><or-input v-model="text" placeholder="Some text here" beforeIcon="lock-line" afterIcon="restart-line" />Position Text
https:// .com
html
<or-input v-model="text" placeholder="Some text here" prefix="https://" suffix=".com" /><or-input v-model="text" placeholder="Some text here" prefix="https://" suffix=".com" />Clear Input
html
<or-input v-model="text" placeholder="Some text here" clear /><or-input v-model="text" placeholder="Some text here" clear />Props
| Prop | Default | Values | Description |
|---|---|---|---|
| size | "sm" | "sm", "md", "lg" | Controls size of the component |
| clear | false | boolean | boolean |
| afterIcon | null | remixicon class | Note: remove the "ri" in class nameIcon to be placed before the input |
| beforeIcon | null | remixicon class | Note: remove the "ri" in class nameIcon to be placed after the input |
| state | 'error', 'success' | Gives an appropriate UI indication |
Slots
| Name | Scoped slots | Description |
|---|---|---|
| before | null | Content to be placed to the left of the input |
| after | null | Content to be placed to the right of the input |
| node-content | node | Can be used to further customise the display of nodes in the menu |