NbTextInput is the primary text entry component. It wraps a native <input> or <textarea> with a label, validation messages, two layout variants, and three sizes. It is designed to sit flush on the same grid line as buttons and other form controls.
<template>
<NbTextInput
v-model="value"
label="Label"
placeholder="Placeholder"
helper="Helper text"
/>
</template>Variants
The variant prop controls how the label and messages are positioned relative to the field box.
Default
Label sits above the field, message below. Standard form layout.
Fluid
Label and message icon live inside the field box. Useful in dense toolbars or inspector panels.
<template>
<NbTextInput v-model="value" variant="fluid" label="Label" />
</template>Sizes
All three sizes align to the 8px base-unit grid.
Validation states
error takes priority over warning, which takes priority over helper.
Disabled and read-only
Multiline
Set multiline to render a <textarea>. Use rows to control the initial height.
<template>
<NbTextInput v-model="value" label="Notes" multiline :rows="4" />
</template>Inline actions slot
Use the #actions slot to place buttons inside the field at the trailing edge (default variant only).
<template>
<NbTextInput v-model="value" label="AI Translate">
<template #actions>
<NbButton size="sm" variant="ghost">
<NbIcon name="sparkle" :size="14" />
</NbButton>
</template>
</NbTextInput>
</template>