Skip to content

Field

The Field component is used to add functionality to controls and to attach/group components and elements together.

Examples

Base

Addons

Use the addons prop to attach multiple controls together.

Grouped

Use the grouped prop to group several controls that belong together.

Horizontal

When the horizontal prop is set, the component will align horizontally.

Slots

The label and the message can be customised using slots if needed.

Field component

Fields are used to add functionality to controls and to attach/group components and elements together.

html
<o-field></o-field>

Props

Prop nameDescriptionTypeValuesDefault
addonsField automatically attach controls togetherboolean-false
groupedDirect child components/elements of Field will be grouped horizontally
(see which ones at the top of the page).
boolean-false
horizontalGroup label and control on the same line for horizontal formsboolean-false
labelField labelstring-
labelForSame as native for set on the labelstring-
labelIdA unique HTML id for the field label to associate an input withstring-useId()
labelSizeVertical size of inputstringsmall, medium, large
From config:
field: {
  labelsize: undefined
}
messageHelp message textstring-
messageIdA unique HTML id for the field message to associate an input withstring-useId()
messageTagMessage element tag nameDynamicComponent-
From config:
field: {
  messageTag: "p"
}
mobileBreakpointMobile breakpoint as max-width valuestring-
From config:
field: {
  mobileBreakpoint: undefined
}
multilineAllow controls to fill up multiple lines, making it responsiveboolean-false
overrideOverride existing theme classes completelyboolean-
variantColor of the field and help message, also adds a matching icon.
Used by Input, Select and Autocomplete.
stringprimary, info, success, warning, danger, and any other custom color

Slots

NameDescriptionBindings
labelOverride the labellabel string - label property
messageOverride the messagemessage string - field message
defaultDefault content

Class Inspector

Classes applied to the element:
Class propDescriptionPropsSuffixes
rootClassClass of the root element.
mobileClassClass of the root element when on mobile.
👉 Switch to mobile view to see it in action!
focusedClassClass of the root element when the form element is focused.
👉 Will be controlled by the focus event emitted by form elements.
filledClassClass of the root element when the form element is filled.
👉 Will be controlled by the form element.
bodyClassClass for the body wrapper element.
groupedClassClass of the inner body wrapper when grouped.grouped
addonsClassClass of the inner body wrapper element when element get automatically attached together inside a field.
multilineClassClass for inner body wrapper element to fill up multiple lines.multiline
horizontalClassClass to align label and control in horizontal forms.horizontal
horizontalLabelClassClass for the label element when horizontal.horizontal
horizontalBodyClassClass for the body element when horizontal.horizontal
labelClassClass for the label element.label
labelSizeClassClass for the label element with size.label
labelSize
small
medium
large
labelVariantClassClass of the label element with variant.label
variant
primary
info
warning
danger
messageClassClass of the the message element.message
messageVariantClassClass of the message element with variant.message
variant
primary
info
warning
danger

Sass variables

Current theme ➜ Oruga

SASS VariableDefault
$field-label-color#363636
$field-label-font-weight600
$field-margin-bottom0.75rem
$field-message-font-size0.75rem
$field-message-margin-top0.25rem
$field-spacer0.5rem
$field-horizontal-spacer0 1.5rem 0 0

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS VariableDefault
$floating-in-height3.25em

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

SASS VariableDefault
$input-field-margin-bottom$spacer
$input-field-grouped-spacercalc($spacer / 2)

See ➜ 📄 Full scss file

Released under the MIT License.