Field

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

Base

Name

This email is invalid

Username

This username is available

Password

Subject

Wrong subject

Selected subject is wrong

Show code

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

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

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

    <o-field label="Password" variant="warning">
      <o-input model-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>

Addons

Show code

<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>
        <template #trigger>
          <o-button variant="primary" icon-right="caret-down" />
        </template>

        <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>
        <template #trigger="{ active }">
          <o-button icon-right="caret-down"> Filters </o-button>
        </template>

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

Grouped

What do you want to search?

Show code

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

Horizontal

Subject

Please enter a subject

From

Topic

Message

Show code

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

Slots

With tooltip

Label with custom style

Message with custom style

Show code

<template>
  <section>
    <o-field horizontal>
      <template #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 #label> Label with custom <i>style</i> </template>
      <o-input></o-input>
      <template #message> Message with custom <b>style</b> </template>
    </o-field>
  </section>
</template>

Class props

Field

How does Class props inspector work?

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		boolean	-
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

📄 Full scss file

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

Field #

Base

Addons

Grouped

Horizontal

Slots

Class props #

Class prop

Description

Props

Suffixes

Props #

Slots #

Style #

Field

Class props

Props

Slots

Style