Input Groups

Unfortunately, the design page you are looking for is not ready yet. But you might want to switch to the implementation tab. There you will find the corresponding Vue component and a description of the different use cases and what to consider when implementing it.
If you have any questions, suggestions or ideas for improvement right now, please feel free to contact us directly.
via Slack: #wescale-wui-public
via Mail: wescale-wui@wescale.com

Stay tuned! 

import {
  WuiInputGroup,
  WuiInputGroupAddon,
  WuiInputGroupPrepend,
  WuiInputGroupAppend,
  WuiInputGroupText,
} from "@wui/wui-vue/lib/input-group";

Description

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs.

<div>
  <!-- Using props -->
  <wui-input-group size="lg" prepend="$" append=".00">
    <wui-form-input></wui-form-input>
  </wui-input-group>

  <!-- Using slots -->
  <wui-input-group class="m-t-15">
    <template #append>
      <wui-input-group-text
        ><strong class="text-danger">!</strong></wui-input-group-text
      >
    </template>
    <wui-form-input></wui-form-input>
  </wui-input-group>

  <!-- Using components -->
  <wui-input-group prepend="Username" class="m-t-15">
    <wui-form-input></wui-form-input>
    <wui-input-group-append>
      <wui-button variant="success" outline>Button</wui-button>
      <wui-button variant="info">Button</wui-button>
    </wui-input-group-append>
  </wui-input-group>
</div>

<!-- wui-input-group.vue -->

Usage

You can attach addons using either props, named slots and/or sub-components.

Using prepend and append props

Values will be internally wrapped by a <wui-input-group-text> to display correctly.

<div>
  <wui-input-group prepend="$" append=".00">
    <wui-form-input></wui-form-input>
  </wui-input-group>

  <wui-input-group prepend="0" append="100" class="m-t-15">
    <wui-form-input type="range" min="0" max="100"></wui-form-input>
  </wui-input-group>
</div>

<!-- wui-input-group-using-props.vue -->

Using named slots

if you want better control over addons, you can use prepend and append slots instead.

The slot content will automatically be wrapped by <wui-input-group-prepend> or <wui-input-group-append> to display correctly.

<div>
  <wui-input-group>
    <template #prepend>
      <wui-input-group-text>Username</wui-input-group-text>
    </template>
    <wui-form-input></wui-form-input>

    <template #append>
      <wui-dropdown text="Dropdown" variant="success">
        <wui-dropdown-item>Action A</wui-dropdown-item>
        <wui-dropdown-item>Action B</wui-dropdown-item>
      </wui-dropdown>
    </template>
  </wui-input-group>
</div>

<!-- wui-input-group-using-slots.vue -->

Using sub-components

Use the <wui-input-group-prepend> or <wui-input-group-append> to add arbitrary addons wherever you like, and use these components to group buttons in your input group. Single buttons must always be wrapped in these components for proper styling.

<div>
  <wui-input-group>
    <wui-input-group-prepend>
      <wui-button variant="outline-info">Button</wui-button>
    </wui-input-group-prepend>

    <wui-form-input type="number" min="0.00"></wui-form-input>

    <wui-input-group-append>
      <wui-button variant="outline-secondary">Button</wui-button>
      <wui-button variant="outline-primary">Button</wui-button>
      <wui-input-group-text> x </wui-input-group-text>
    </wui-input-group-append>
  </wui-input-group>
</div>

<!-- wui-input-group-addons-placement.vue -->

Set the is-text prop on <wui-input-group-prepend> or <wui-input-group-append> if the content is textual in nature to apply proper styling. Alternatively, place the <wui-input-group-text> subcomponent inside of the <wui-input-group-prepend> or <wui-input-group-append>. This also applies when you want to use on of WuiVue's icons.

Supported form-controls

The following are the form controls supported as the input-group's main input element:

Notes:

  • WuiVue uses custom SCSS/CSS to handling sizing the <wui-form-file> input when it is placed in a <wui-input-group> which has a size specified.
  • WuiVue uses custom SCSS/CSS when <wui-form-input type="range"> is placed in a <wui-input-group>.

Checkbox and radio addons

Place any checkbox or radio within an input group's addon instead of text.

Note: WUI recommends using native radio and checkbox inputs over custom radios and checkboxes, but it is possible to use as <wui-form-radio> and <wui-form-checkbox> with a few utility classes applied.

Native checkbox and radio addons

<div>
  <wui-input-group class="m-b-15">
    <wui-input-group-prepend is-text>
      <input type="checkbox" aria-label="Checkbox for following text input" />
    </wui-input-group-prepend>
    <wui-form-input aria-label="Text input with checkbox"></wui-form-input>
  </wui-input-group>

  <wui-input-group>
    <wui-input-group-prepend is-text>
      <input type="radio" aria-label="Radio for following text input" />
    </wui-input-group-prepend>
    <wui-form-input aria-label="Text input with radio input"></wui-form-input>
  </wui-input-group>
</div>

<!-- wui-input-group-checks-radios.vue -->

Custom radio, checkbox, and switch addons

Using <wui-form-checkbox> and <wui-form-radio> components as addons, using WUI utility classes for additional styling to get them to "fit" in the addon:

<div>
  <wui-input-group class="m-b-15">
    <wui-input-group-prepend is-text>
      <wui-form-checkbox class="m-r--5">
        <span class="sr-only">Checkbox for following text input</span>
      </wui-form-checkbox>
    </wui-input-group-prepend>
    <wui-form-input aria-label="Text input with checkbox"></wui-form-input>
  </wui-input-group>

  <wui-input-group class="m-b-15">
    <wui-input-group-prepend is-text>
      <wui-form-radio class="m-r--5">
        <span class="sr-only">Radio for following text input</span>
      </wui-form-radio>
    </wui-input-group-prepend>
    <wui-form-input aria-label="Text input with radio input"></wui-form-input>
  </wui-input-group>

  <wui-input-group>
    <wui-input-group-prepend is-text>
      <wui-form-checkbox switch class="m-r--5">
        <span class="sr-only">Switch for following text input</span>
      </wui-form-checkbox>
    </wui-input-group-prepend>
    <wui-form-input aria-label="Text input with switch"></wui-form-input>
  </wui-input-group>
</div>

<!-- wui-input-group-custom-checks-radios.vue -->

In the above example, we have use the .sr-only class on a <span> to visually hide the custom control's label content (while making them still accessible to screen reader users), and used the utility class .m-r--5 to add a negative right margin to compensate for the "gutter" space between the control and the hidden label.

Multiple inputs

<div>
  <wui-input-group prepend="First and last name" class="m-b-15">
    <wui-form-input aria-label="First name"></wui-form-input>
    <wui-form-input aria-label="Last name"></wui-form-input>
  </wui-input-group>
</div>

<!-- input-group-multiple-inputs.vue -->

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

<div>
  <wui-input-group prepend="Item">
    <wui-input-group-prepend is-text>
      <input type="checkbox" aria-label="Checkbox for following text input" />
    </wui-input-group-prepend>
    <wui-input-group-prepend is-text><b>$</b></wui-input-group-prepend>
    <wui-form-input
      type="number"
      aria-label="Text input with checkbox"
    ></wui-form-input>
  </wui-input-group>
</div>

<!-- wui-input-group-multiple-addons.vue -->

<div>
  <wui-input-group>
    <template #prepend>
      <wui-dropdown text="Dropdown" variant="info">
        <wui-dropdown-item>Action A</wui-dropdown-item>
        <wui-dropdown-item>Action B</wui-dropdown-item>
      </wui-dropdown>
    </template>

    <wui-form-input></wui-form-input>

    <template #append>
      <wui-dropdown
        text="Dropdown"
        variant="outline-secondary"
        v-for="i in 2"
        :key="i"
      >
        <wui-dropdown-item>Action C</wui-dropdown-item>
        <wui-dropdown-item>Action D</wui-dropdown-item>
      </wui-dropdown>
    </template>
  </wui-input-group>
</div>

<!-- wui-input-group-dropdown.vue -->

Control sizing

Set height using the size prop to sm or lg for small or large respectively. There is no need to set size on the individual inputs or buttons. Note however, you will be required to also set the size on dropdowns.

<div>
  <wui-input-group
    v-for="size in ['sm','','lg']"
    :key="size"
    :size="size"
    class="m-b-15"
    prepend="Label"
  >
    <wui-form-input></wui-form-input>
    <wui-input-group-append>
      <wui-button size="sm" text="Button" variant="success">Button</wui-button>
    </wui-input-group-append>
  </wui-input-group>
</div>

<!-- wui-input-group-size.vue -->

To control width, place the input inside standard WUI grid column.

Sizing custom radio, checkbox and switch addons

If using <wui-form-radio> or <wui-form-checkbox> as addons, additional utility classes may be required to make everything fit correctly, depending on the size chosen:

<div>
  <wui-input-group size="sm" prepend="Small" class="m-b-15">
    <wui-form-input
      aria-label="Small text input with custom switch"
    ></wui-form-input>
    <wui-input-group-append is-text>
      <wui-form-checkbox switch class="m-r--5 m-b--1">
        <span class="sr-only">Checkbox for previous text input</span>
      </wui-form-checkbox>
    </wui-input-group-append>
  </wui-input-group>

  <wui-input-group size="lg" prepend="Large" class="m-b-15">
    <wui-form-input aria-label="Large text input with switch"></wui-form-input>
    <wui-input-group-append is-text>
      <wui-form-checkbox switch class="m-r--5">
        <span class="sr-only">Switch for previous text input</span>
      </wui-form-checkbox>
    </wui-input-group-append>
  </wui-input-group>
</div>

<!-- wui-input-group-custom-checks-radios-sizing.vue -->

Specifically, when using the sm size on <wui-input-group> you will need to add a negative bottom margin, via the use of the .m-b--1 utility class.

Contextual states

Bootstrap v4 currently does not support contextual state styling (i.e. valid or invalid) of input groups. However, the inputs inside the input group do support contextual state.

Component reference

<wui-input-group>

Properties

PropertyTypeDefaultDescription
appendStringText to append to the input group
append-html
Use with caution		StringHTML string to append to the input group. Has precedence over 'append' prop
idStringUsed to set the id attribute on the rendered content, and used as the base to generate any additional element IDs as needed
prependStringText to prepend to the input group
prepend-html
Use with caution		StringHTML string to prepend to the input group. Has precedence over 'prepend' prop
sizeStringSet the size of the component's appearance. 'sm', 'md' (default), or 'lg'
tagString'div'Specify the HTML tag to render instead of the default tag

Slots

NameDescription
appendAppend attachment
defaultContent to place in the input group
prependPrepend attachment

<wui-input-group-prepend>

Properties

PropertyTypeDefaultDescription
idStringUsed to set the id attribute on the rendered content, and used as the base to generate any additional element IDs as needed
is-textBooleanfalseWhen 'true', wraps the content in a wui-input-group-text component
tagString'div'Specify the HTML tag to render instead of the default tag

Slots

NameDescription
defaultContent to place in the input group prepend

<wui-input-group-append>

Properties

PropertyTypeDefaultDescription
idStringUsed to set the id attribute on the rendered content, and used as the base to generate any additional element IDs as needed
is-textBooleanfalseWhen 'true', wraps the content in a wui-input-group-text component
tagString'div'Specify the HTML tag to render instead of the default tag

Slots

NameDescription
defaultContent to place in the input group append

<wui-input-group-text>

Properties

PropertyTypeDefaultDescription
tagString'div'Specify the HTML tag to render instead of the default tag

Slots

NameDescription
defaultContent to place in the input group append

<wui-input-group-addon>

Properties

PropertyTypeDefaultDescription
appendBooleanfalseWhen set to 'true' sets the addon as being appended. defaults to 'false' which is prepended
idStringUsed to set the id attribute on the rendered content, and used as the base to generate any additional element IDs as needed
is-textBooleanfalseWhen 'true', wraps the content in a wui-input-group-text component
tagString'div'Specify the HTML tag to render instead of the default tag

Slots

NameDescription
defaultContent to place in the input group addon

Importing individual components

You can import individual components into your project via the following named exports:

ComponentNamed Export
<wui-input-group>WuiInputGroup
<wui-input-group-prepend>WuiInputGroupPrepend
<wui-input-group-append>WuiInputGroupAppend
<wui-input-group-text>WuiInputGroupText
<wui-input-group-addon>WuiInputGroupAddon

Example

import { WuiInputGroup } from "@wui/wui-vue/lib/input-group";
Vue.component("wui-input-group", WuiInputGroup);

Importing as a Vue.js plugin

This plugin includes all of the above listed individual components. Plugins also include any component aliases.

Named ExportImport Path
InputGroupPluginwui/wui-vue/lib/input-group

This plugin also automatically includes the following plugins:

  • VWInputGroupPlugin

Example

import { InputGroupPlugin } from "@wui/wui-vue/lib/input-group";
Vue.use(InputGroupPlugin);
From WUI and with

WUI is wescale’s design system

WPS Management GmbH. All rights reserved | Legal Notice

Some features in this style guide may not work as expected because they are not supported by the browser version you are using.

For the best experience, we recommend upgrading to a newer browser such as Microsoft Edge, Mozilla Firefox, or Google Chrome.