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-false
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-
messageTagMessage element tag nameDynamicComponent-
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

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

SASS VariableDefault
$floating-in-height3.25em

See ➜ 📄 Full scss file

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.