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 name | Description | Type | Values | Default |
---|---|---|---|---|
addons | Field automatically attach controls together | boolean | - | false |
grouped | Direct child components/elements of Field will be grouped horizontally (see which ones at the top of the page). | boolean | - | false |
horizontal | Group label and control on the same line for horizontal forms | boolean | - | false |
label | Field label | string | - | |
labelFor | Same as native for set on the label | string | - | |
labelId | A unique HTML id for the field label to associate an input with | string | - | useId() |
labelSize | Vertical size of input | string | small , medium , large | From config: field: { |
message | Help message text | string | - | |
messageId | A unique HTML id for the field message to associate an input with | string | - | useId() |
messageTag | Message element tag name | DynamicComponent | - | From config: field: { |
mobileBreakpoint | Mobile breakpoint as max-width value | string | - | From config: field: { |
multiline | Allow controls to fill up multiple lines, making it responsive | boolean | - | false |
override | Override existing theme classes completely | boolean | - | |
variant | Color of the field and help message, also adds a matching icon. Used by Input, Select and Autocomplete. | string | primary , info , success , warning , danger , and any other custom color |
Slots
Name | Description | Bindings |
---|---|---|
label | Override the label | label string - label property |
message | Override the message | message string - field message |
default | Default content |
Class Inspector
Class prop | Description | Props | Suffixes | |
---|---|---|---|---|
rootClass | Class of the root element. | |||
mobileClass | Class of the root element when on mobile. 👉 Switch to mobile view to see it in action! | |||
focusedClass | Class of the root element when the form element is focused. 👉 Will be controlled by the focus event emitted by form elements. | |||
filledClass | Class of the root element when the form element is filled. 👉 Will be controlled by the form element. | |||
bodyClass | Class for the body wrapper element. | |||
groupedClass | Class of the inner body wrapper when grouped. | grouped | ||
addonsClass | Class of the inner body wrapper element when element get automatically attached together inside a field. | |||
multilineClass | Class for inner body wrapper element to fill up multiple lines. | multiline | ||
horizontalClass | Class to align label and control in horizontal forms. | horizontal | ||
horizontalLabelClass | Class for the label element when horizontal. | horizontal | ||
horizontalBodyClass | Class for the body element when horizontal. | horizontal | ||
labelClass | Class for the label element. | label | ||
labelSizeClass | Class for the label element with size. | label | small | |
labelVariantClass | Class of the label element with variant. | label | primary | |
messageClass | Class of the the message element. | message | ||
messageVariantClass | Class of the message element with variant. | message | primary |
Sass variables
Current theme ➜ Oruga
SASS Variable | Default |
---|---|
$field-label-color | #363636 |
$field-label-font-weight | 600 |
$field-margin-bottom | 0.75rem |
$field-message-font-size | 0.75rem |
$field-message-margin-top | 0.25rem |
$field-spacer | 0.5rem |
$field-horizontal-spacer | 0 1.5rem 0 0 |
See ➜ 📄 Full scss file
Current theme ➜ Bootstrap
SASS Variable | Default |
---|---|
$input-field-margin-bottom | $spacer |
$input-field-grouped-spacer | calc($spacer / 2) |
See ➜ 📄 Full scss file