Skip to content
On this page

Field

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

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


How does 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


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

Style

📄 Full scss file

CSS VariableSASS VariableDefault
--oruga-field-label-color$field-label-color#363636
--oruga-field-label-font-weight$field-label-font-weight600
--oruga-field-margin-bottom$field-margin-bottom.75rem
--oruga-field-message-font-size$field-message-font-size.75rem
--oruga-field-message-margin-top$field-message-margin-top.25rem
--oruga-field-margin-right$field-margin-right.37rem
--oruga-field-horizontal-label-margin$field-horizontal-label-margin0 1.5rem 0 0

Released under the MIT License.