NbField is a labeled row: a label and a control sharing one grid. A stack of NbFields lines up on a single spine automatically — no per-field CSS — which makes it the building block of an inspector or a settings panel. Wrap any control and it falls into place.
Basic
<template>
<NbField label="Name"><NbTextInput v-model="name" size="sm" /></NbField>
<NbField label="Channel"
><NbSelect v-model="ch" :options="channels" size="sm"
/></NbField>
</template>Every field reads --nb-field-label-width, so fields share one label column. Set it on the container to shift the whole spine:
.my-panel {
--nb-field-label-width: 8rem;
}Stack a control
orientation="stack" puts the label on its own line above a full-width control — for a control that wants the whole width (a tall text area, a prominent slider), or a label too long to sit beside it.
Small controls: control="fit"
For a small control such as a switch, control="fit" lets the label run wide and pushes the control to the right edge, instead of squeezing the label into the fixed column.
Label association
The default slot receives a generated id; bind it to your control so the label points at it (or pass your own via labelFor):
<NbField label="Name" v-slot="{ id }">
<NbTextInput :id="id" v-model="name" />
</NbField>Mixed controls align
Every form control puts the same vertical gap between its label and its field, so a row that mixes control types lines its field tops up to the pixel. The gap is one token, --nb-field-label-gap, shared by NbTextInput, NbDatePicker, NbSelect, NbNumberInput, NbSlider and NbField's stack mode. It holds with or without a helper line.
With a helper or error line under one of them, the field tops still align. The message only adds height below the field:
To tighten or loosen every control at once, override the token on a container:
.my-form {
--nb-field-label-gap: 4px;
}In an inspector
Inside a .nb-inspector container, NbField picks up the inspector treatment automatically — a compact spine, sliders that stack with full-width tracks, compact numeric steppers, and section highlighting. See Building an inspector.