@nextcloud/vueNcInputField
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| value | The value of the input field | string | - | |
| type | The type of the input element | string | text, password, email, tel, url, search | 'text' |
| label | The hidden input label for accessibility purposes. This will also be used as a placeholder unless the placeholder prop is populated with a different string. | string | - | undefined |
| labelOutside | Pass in true if you want to use an external label. This is useful if you need a label that looks different from the one provided by this component | boolean | - | false |
| labelVisible | We normally have the label hidden visually and use it for accessibility only. If you want to have the label visible just above the input field pass in true to this prop. | boolean | - | false |
| placeholder | The placeholder of the input. This defaults as the string that's passed into the label prop. In order to remove the placeholder, pass in an empty string. | string | - | undefined |
| showTrailingButton | Controls whether to display the trailing button. | boolean | - | false |
| trailingButtonLabel | Label of the trailing button Required when showTrailingButton is set | string | - | '' |
| success | Toggles the success state of the component. Adds a checkmark icon. this cannot be used together with canClear. | boolean | - | false |
| error | Toggles the error state of the component. Adds an error icon. this cannot be used together with canClear. | boolean | - | false |
| helperText | Additional helper text message This will be displayed beneath the input field. In case the field is also marked as having an error, the text will be displayed in red. | string | - | '' |
| disabled | Disable the input field | boolean | - | false |
Events
| Event name | Properties | Description |
|---|---|---|
| update:value | ||
| trailing-button-click |
Slots
| Name | Description | Bindings |
|---|---|---|
| default | ||
| trailing-button-icon |
Description
This component is used by the other Fields components. It extends and styles an HTMLInputElement.
You cannot use it as is. This is here for documentation purposes. See the other field components.
For a list of all available props and attributes, please check the HTMLInputElement documentation