Field

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

---

edit on github

Examples

Base

<template>
  <section>
    <o-field label="Name">
      <o-input value="Kevin Garvey"></o-input>
    </o-field>

    <o-field label="Email" variant="danger" message="This email is invalid">
      <o-input type="email" value="john@" maxlength="30"> </o-input>
    </o-field>

    <o-field label="Username" variant="success" message="This username is available">
      <o-input value="johnsilver" maxlength="30"></o-input>
    </o-field>

    <o-field label="Password" variant="warning">
      <o-input value="123" type="password" maxlength="30"></o-input>
    </o-field>

    <o-field label="Subject">
      <o-select placeholder="Select a subject">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </o-select>
    </o-field>

    <o-field label="Wrong subject" variant="danger" message="Selected subject is wrong">
      <o-select placeholder="Select a subject">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
      </o-select>
    </o-field>
  </section>
</template>

<script>
  export default {}
</script>

Addons

<template>
  <section>
    <o-field variant="danger">
      <o-input placeholder="Search..." type="search" icon="search"> </o-input>
      <o-button variant="primary">Search</o-button>
    </o-field>

    <o-field>
      <o-input placeholder="This is expanded" expanded></o-input>
      <o-button>@gmail.com</o-button>
    </o-field>

    <hr />

    <o-field>
      <o-select placeholder="Currency">
        <option>$</option>
        <option>£</option>
        <option>€</option>
      </o-select>
      <o-input type="number" placeholder="0,00"></o-input>
      <o-button variant="success">Transfer</o-button>
    </o-field>

    <o-field>
      <o-button icon-left="bold"></o-button>
      <o-button icon-left="italic"></o-button>
      <o-button icon-left="underline"></o-button>
      <o-button icon-left="align-left"></o-button>
      <o-button icon-left="align-center"></o-button>
      <o-button icon-left="align-right"></o-button>

      <o-input placeholder="Search..." type="search" icon="search"></o-input>
    </o-field>

    <o-field>
      <o-button variant="primary">
        Button
      </o-button>
      <o-dropdown>
        <o-button variant="primary" icon-right="caret-down" slot="trigger"> </o-button>

        <o-dropdown-item>Action</o-dropdown-item>
        <o-dropdown-item>Another action</o-dropdown-item>
        <o-dropdown-item>Something else</o-dropdown-item>
      </o-dropdown>
    </o-field>

    <o-field>
      <o-dropdown>
        <o-button icon-right="caret-down" slot="trigger">
          Filters
        </o-button>

        <o-dropdown-item value="open_issues">Open Issues and Pull Requests</o-dropdown-item>
        <o-dropdown-item value="your_issues">Your Issues</o-dropdown-item>
        <o-dropdown-item value="pull_requests">Your Pull Requests</o-dropdown-item>
        <o-dropdown-item value="everything">Everything</o-dropdown-item>
      </o-dropdown>
      <o-input icon="search" type="search" placeholder="Search..."></o-input>
    </o-field>
  </section>
</template>

<script>
  export default {}
</script>

Grouped

<template>
  <section>
    <o-field grouped variant="danger" message="What do you want to search?">
      <o-input placeholder="Search..."></o-input>
      <o-button variant="primary">Search</o-button>
    </o-field>

    <o-field grouped message="What do you want to search?">
      <o-input placeholder="Search..." expanded></o-input>
      <o-button variant="primary">Search</o-button>
    </o-field>

    <o-field grouped group-multiline>
      <o-input></o-input>
      <o-button>First</o-button>
      <o-button>Second</o-button>
      <o-button>Third</o-button>
      <o-button>Fourth</o-button>
      <o-button>Fifth</o-button>
      <o-button>Sixth</o-button>
      <o-button>Seventh</o-button>
      <o-button>Eighth</o-button>
    </o-field>
  </section>
</template>

<script>
  export default {}
</script>

Horizontal

<template>
  <section>
    <o-field horizontal label="Subject" variant="danger" message="Please enter a subject">
      <o-input name="subject" expanded></o-input>
    </o-field>

    <o-field horizontal label="From">
      <o-input name="name" placeholder="Name" expanded></o-input>
      <o-input name="email" type="email" placeholder="nobody@nowhere.com" expanded></o-input>
    </o-field>

    <o-field horizontal label="Topic">
      <o-select placeholder="Select a topic">
        <option value="1">Oruga</option>
        <option value="2">Vue.js</option>
        <option value="3">UI</option>
      </o-select>
    </o-field>

    <o-field horizontal label="Message">
      <o-input type="textarea"></o-input>
    </o-field>

    <o-field horizontal
      ><!-- Label left empty for spacing -->
      <o-button variant="primary">
        Send message
      </o-button>
    </o-field>
  </section>
</template>

<script>
  export default {}
</script>

Slots

<template>
  <section>
    <o-field horizontal>
      <template slot="label">
        With tooltip
        <o-tooltip label="Help text here for explanation">
          <o-icon size="small" icon="question-circle"></o-icon>
        </o-tooltip>
      </template>
      <o-input size="medium"></o-input>
    </o-field>

    <o-field>
      <template slot="label"> Label with custom <i>style</i> </template>
      <o-input></o-input>
      <template slot="message"> Message with custom <b>style</b> </template>
    </o-field>
  </section>
</template>

<script>
  export default {}
</script>

Class props

📄 Full scss file

Field

How does Class props inspector work?

Class props inspector is useful to see class props you want to use to customize Oruga components and how they change a component. You can click on Inspect button to find the exact element where a specific class prop acts.

In the Class props inspector there are other columns

Class prop

This column contains the name of the Class prop you want to inspect.
If you find a name with a link (▷ classPropName) this refers to a subitem (e.g. Dropdown Item in Dropdown).

Description

This column contains the description of the Class prop you want to inspect.
👉 This icon indicates some warning, e.g. this Class prop is visible only on mobile.
🔍 This icon indicates that you should pay attention to CSS specificity. See "Deal with specificity" section in the documentation.

Props

This column contains a list of props that activate the class, e.g. if a class prop contains disabled prop it means that only when the component has disabled prop.

Suffixes

This column contains all the possible suffixes that you'll receive if you use a function to customize your Class prop. You'll find more info in the "Overriding section".

Class prop	Description	Props	Suffixes
addonsClass	Class for components automatically attached together when inside a field. 👉 Use the expanded prop on the control to fill up the remaining space
bodyClass	Class for field body.
bodyHorizontalClass	Class for field body when horizontal. 🔍 Classes applied have a higher specificity than expected when mobileClass is applied	horizontal
filledClass	Class for the filled field. 👉 when it contains a input
focusedClass	Class for the focused field. 👉 focus event emitted by form elements
groupMultilineClass	Class when fields fill up multiple lines.	groupMultiline
groupedClass	Class when fields are grouped together.	grouped
horizontalClass	Class to align label and control in horizontal forms. 🔍 Classes applied have a higher specificity than expected when mobileClass is applied	horizontal
labelClass	Class for field label.
labelHorizontalClass	Class for field label when horizontal. 🔍 Classes applied have a higher specificity than expected when mobileClass is applied	horizontal
labelSizeClass	Class for field label size.	labelSize	small medium large
messageClass	Class for the field message.	message
mobileClass	Class of file component when on mobile. 👉 Switch to mobile view to see it in action!
rootClass	Class of the root element.
variantLabelClass	Class of the label field variant.	variant	primary info warning danger
variantMessageClass	Class of the message field variant.	variant	primary info warning danger

Props

Prop name	Description	Type	Values	Default
addons	Field automatically attach controls together	boolean	-	true
groupMultiline	Allow controls to fill up multiple lines, making it responsive	boolean	-
grouped	Direct child components/elements of Field will be grouped horizontally (see which ones at the top of the page)	boolean	-
horizontal	Group label and control on the same line for horizontal forms	boolean	-
label	Field label	string	-
labelFor	Same as native for set on the label	string	-
labelSize	Vertical size of input, optional	string	small, medium, large
message	Help message text	string	-
mobileBreakpoint	Mobile breakpoint as max-width value	string	-
override	Override classes	boolean	-	false
variant	Color of the field and help message, also adds a matching icon, optional. Used by Input, Select and Autocomplete	string	primary, info, success, warning, danger, and any other custom color

Slots

Name	Description	Bindings
label
default
message

Style

CSS Variable	SASS Variable	Default
--oruga-field-label-color	$field-label-color	#363636
--oruga-field-label-font-weight	$field-label-font-weight	600
--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-margin	0 1.5rem 0 0