Skip to content
On this page

Field

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

Examples

Base

This email is invalid

This username is available

Selected subject is wrong

Show code

Addons

Show code

Grouped

What do you want to search?

What do you want to search?

Show code

Horizontal

Please enter a subject

Show code

Slots

Message with custom style

Show code

Class props

'Classes applied to the element'
How does the Class props inspector work?
Class propDescriptionPropsSuffixes
addonsClassClass for components automatically attached together when inside a field.
👉 Use the expanded prop on the control to fill up the remaining space
bodyClassClass for field body.
bodyHorizontalClassClass for field body when horizontal.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
horizontal
filledClassClass for the filled field.
👉 when it contains a input
focusedClassClass for the focused field.
👉 focus event emitted by form elements
groupMultilineClassClass when fields fill up multiple lines.groupMultiline
groupedClassClass when fields are grouped together.grouped
horizontalClassClass to align label and control in horizontal forms.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
horizontal
labelClassClass for field label.
labelHorizontalClassClass for field label when horizontal.
🔍 Classes applied have a higher specificity than expected when mobileClass is applied
horizontal
labelSizeClassClass for field label size.labelSizesmall
medium
large
messageClassClass for the field message.message
mobileClassClass of file component when on mobile.
👉 Switch to mobile view to see it in action!
rootClassClass of the root element.
variantLabelClassClass of the label field variant.variantprimary
info
warning
danger
variantMessageClassClass of the message field variant.variantprimary
info
warning
danger

Field component

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

Props

Prop nameDescriptionTypeValuesDefault
addonsField automatically attach controls togetherboolean-true
groupMultilineAllow controls to fill up multiple lines, making it responsiveboolean-
groupedDirect child components/elements of Field will be grouped horizontally (see which ones at the top of the page)boolean-
horizontalGroup label and control on the same line for horizontal formsboolean-
labelField labelstring-
labelForSame as native for set on the labelstring-
labelSizeVertical size of input, optionalstringsmall, medium, large
messageHelp message textstring-
mobileBreakpointMobile breakpoint as max-width valuestring-
overrideboolean-
variantColor of the field and help message, also adds a matching icon, optional. Used by Input, Select and Autocompletestringprimary, info, success, warning, danger, and any other custom color

Slots

NameDescriptionBindings
label
default
message

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.