Field

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

Examples

Base

Show code

HTML

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

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

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

    <o-field label="Password" variant="warning">
        <o-input model-value="123" type="password" :maxlength="30" />
    </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>

js

css

Addons

Show code

HTML

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

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

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

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

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

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

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

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

            <o-dropdown-item label="Action" />
            <o-dropdown-item label="Another action" />
            <o-dropdown-item label="Something else" />
        </o-dropdown>
        <o-button variant="primary" label="Button" />
    </o-field>

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

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

js

css

Grouped

Show code

HTML

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

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

    <o-field grouped group-multiline>
        <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>

js

css

Horizontal

Show code

HTML

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

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

    <o-field horizontal>
        <o-button
            variant="primary"
            icon-left="envelope"
            label="Send message"
            outlined />
    </o-field>
</section>

js

css

Slots

Show code

HTML

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

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

js

css

Class props

'Classes applied to the element'

Field component

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

<o-field></o-field>

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	-	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	-
labelSize	Vertical size of input	string	small, medium, large	From config: field: {   labelsize: undefined }
message	Help message text	string	-
mobileBreakpoint	Mobile breakpoint as max-width value	string	-	From config: field: {   mobileBreakpoint: undefined }
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
default	Default content
message	Override the message

Sass variables

Current theme ➜ Oruga Base

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-margin-right	0.37rem
$field-horizontal-label-margin	0 1.5rem 0 0

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

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-margin-right	0.37rem
$field-horizontal-label-margin	0 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 Variable	Default
$input-field-grouped-spacer	0.5rem
$input-field-margin-bottom	$spacer
$input-field-btn-border-color	$input-border-color

See ➜ 📄 Full scss file