New to Kendo UI for Vue? Start a free 30-day trial

FloatingLabel

Component

Represents the KendoVue FloatingLabel component. Accepts properties of type FloatingLabelProps. Use the FloatingLabel to show a label that moves above the editor when the editor has focus or a value.

Definition

Package:@progress/kendo-vue-labels

Properties Interface:FloatingLabelProps

Syntax:

vue

<FloatingLabel :label="'First Name'" :editor-id="'firstName'" :editor-value="firstName">
    <Input :id="'firstName'" v-model="firstName" />
</FloatingLabel>

Properties

dir?

string

Sets the text direction of the FloatingLabel, for example, rtl.

editorDisabled?

boolean

Sets whether the editor is disabled.

editorId?

string

Sets the for attribute of the label element. Set it to the id of the editor.

editorPlaceholder?

string

Sets the placeholder of the editor. The FloatingLabel uses it to check whether the editor is empty.

editorValid?

boolean

Sets whether the editor is valid. When set to false, the label shows an error style.

editorValue?

any

Sets the value of the editor. The FloatingLabel uses it to check whether the editor is empty.

focused?

boolean

When set to true, shows the label in a focused position.

id?

string

Sets the id of the label element. Set the same value to the ariaLabelledBy prop of the editor. Use it when the editor does not contain a native form element.

label?

string

Sets the text of the floating label that describes the editor.

labelClass?

string

Sets the class of the label element.

optional?

boolean

When set to true, marks the label as optional.