Skip to content

Field

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

Examples

Base

Show code

Addons

Show code

Grouped

Show code

Horizontal

Show code

Slots

Show code

Class props

'Classes applied to the element'

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-true
groupMultilineAllow controls to fill up multiple lines, making it responsiveboolean-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-
labelSizeVertical size of inputstringsmall, medium, large
From config:
field: {
  labelsize: undefined
}
messageHelp message textstring-
messageTagDynamicComponent-
From config:
field: {
  messageTag: "p"
}
mobileBreakpointMobile breakpoint as max-width valuestring-
From config:
field: {
  mobileBreakpoint: undefined
}
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

Sass variables

Current theme ➜ Oruga Base

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-margin-right0.37rem
$field-horizontal-label-margin0 1.5rem 0 0

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

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-margin-right0.37rem
$field-horizontal-label-margin0 1.5rem 0 0

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS VariableDefault
$input-field-grouped-spacer0.5rem
$input-field-margin-bottom$spacer
$input-field-btn-border-color$input-border-color

See ➜ 📄 Full scss file

Released under the MIT License.