AisInputGroup

Build custom controls by grouping inputs and selects with text, icons, buttons, and menus. Input groups are useful for building toolbars, filters, and standalone form controls. Use AisAddon to attach text and icons.

AisInput + AisButton

<script setup>
import { AisInputGroup } from '@ais-public/ais-components'
import { AisInput } from '@ais-public/ais-components'
import { AisButton } from '@ais-public/ais-components'
import { AisField } from '@ais-public/ais-components'
import { faBuildingColumns } from '@fortawesome/free-solid-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'
library.add(faBuildingColumns)
</script>

<template>
    <AisField label="AisInput + AisButton">
      <AisInputGroup class="">
        <AisInput :icon="faBuildingColumns" placeholder="Example..." size="md" class="w-72" />
        <AisButton variant="secondary" arrow font="caps" size="md" hover press>Get Info</AisButton>
      </AisInputGroup>
    </AisField>
</template>

Props

size

The size prop takes the standard sm, md, and lg values and adjusts the size of the input group accordingly. AisInputGroup will also inherit its size from a surrounding AisForm, AisFieldset, or AisField. In this example, the size could have been set on the field.

Size

smmdlgxl

Select group size

AisInput + AisButton

<script setup>
import {ref} from 'vue'
import { AisInputGroup } from '@ais-public/ais-components'
import { AisInput } from '@ais-public/ais-components'
import { AisSelect } from '@ais-public/ais-components'
import { AisButton } from '@ais-public/ais-components'
import { AisDropdown } from '@ais-public/ais-components'
import { AisField } from '@ais-public/ais-components'

let selectedSize = ref('md')

const items = [
  { key: 'item1', label: 'Menu Item 1', href: '/menu/item/1' },
  { key: 'item2', label: 'Menu Item 2', to: '/menu/item/1' },
  { key: 'item3', label: 'Menu Item 3' },
]

</script>

<template>
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
    <AisField label="Size" description="Select group size">
      <AisSelect
          v-model="selectedSize"
          :options="['sm', 'md', 'lg', 'xl']"
          :size="selectedSize"
      />
    </AisField>
    <AisField label="AisInput + AisButton" class="md:col-span-2">
      <AisInputGroup :size="selectedSize">
        <AisInput icon="edit" placeholder="Example..." class="grow"/>
        <AisButton variant="secondary" arrow font="caps" hover press>Get Info</AisButton>
      </AisInputGroup>
    </AisField>
  </div>
</template>

Layout

AisInputGroup creates a flex context to handle its children, but AIS developers will need to specify layout details for the children to get an exact look and feel. One option is to set an explicit width (i.e. w-72) or tell the child to fill the whole container (i.e. flex-1). A number of examples are included below to help you get started.

Grow

Use the flex and flex-grow utilities to specify how an individual element in an input group should expand to fill its container. Ais Components also introduces grow-2 and grow-3 to further specify the growth ratios.

Flex grow

Admin

<script setup>
import {ref} from 'vue'
import { AisField } from '@ais-public/ais-components'
import { AisInputGroup } from '@ais-public/ais-components'
import { AisAddon } from '@ais-public/ais-components'
import { AisInput } from '@ais-public/ais-components'

let input = ref(null)
let inputVal = ref('')
let clearInput = () => {
  inputVal.value = ''
  input.value.focus()
}
</script>

<template>
  <AisField label="Flex grow">
    <AisInputGroup>
      <AisAddon icon="users">Admin</AisAddon>
      <AisInput class="grow" ref="input" v-model="inputVal" placeholder="Testing..." size="md"  />
      <AisAddon button icon="close" variant="default" label="More options..." @click="clearInput" />
    </AisInputGroup>
  </AisField>
</template>

Explicit width

At times, you will want to explicitly control the size of elements as neither the container size or default element size will make sense. Use the width utilities to customize an element's width. You can set the width on either the input group itself or on individual elements in the group. Be sure to test your design at multiple screen sizes. Note that AisAddon will not grow.

Explicit Width

Admin

<script setup>
import {ref} from 'vue'
import { AisField } from '@ais-public/ais-components'
import { AisInputGroup } from '@ais-public/ais-components'
import { AisAddon } from '@ais-public/ais-components'
import { AisInput } from '@ais-public/ais-components'

let input = ref(null)
let inputVal = ref('')
let clearInput = () => {
  inputVal.value = ''
  input.value.focus()
}
</script>

<template>
  <AisField label="Explicit Width">
    <AisInputGroup class="w-full md:w-11/12 lg:w-1/2">
      <AisAddon icon="users">Admin</AisAddon>
      <AisInput class="grow" ref="input" v-model="inputVal" placeholder="Testing..." size="md"  />
      <AisAddon button icon="close" variant="default" label="More options..." @click="clearInput" />
    </AisInputGroup>
  </AisField>
</template>

Examples

AisInputGroup allows developers to mix and match many different elements. We include a variety of examples below to help you get started.

Select

AisSelect + AisButton

The Mysterious Production of EggsNoble BeastBreak It YourselfThings Are Really Great Here

<script setup>
import {ref} from 'vue'
import { AisInputGroup } from '@ais-public/ais-components'
import { AisSelect } from '@ais-public/ais-components'
import { AisButton } from '@ais-public/ais-components'
import { AisField } from '@ais-public/ais-components'

const albums = [
  'The Mysterious Production of Eggs',
  'Noble Beast',
  'Break It Yourself',
  'Things Are Really Great Here'
]
</script>

<template>
  <AisField label="AisSelect + AisButton">
    <AisInputGroup class="">
      <AisSelect :options="albums" class="grow" />
      <AisButton variant="secondary" font="caps" hover press>Select</AisButton>
    </AisInputGroup>
  </AisField>
</template>

Dropdown

Note we have an alignment issue for sizes medium and above. We are working to resolve this issue.

AisInput + AisDropdown

<script setup>
import { AisInputGroup } from '@ais-public/ais-components'
import { AisInput } from '@ais-public/ais-components'
import { AisDropdown } from '@ais-public/ais-components'
import { AisMenuItem } from '@ais-public/ais-components'
import { AisField } from '@ais-public/ais-components'
import { faBuildingColumns } from '@fortawesome/free-solid-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'
library.add(faBuildingColumns)
</script>

<template>
  <AisField label="AisInput + AisDropdown">
    <AisInputGroup class="">
      <AisInput icon="search" placeholder="Testing..." size="md" class="flex-1" />
      <AisDropdown class="rounded-r" variant="secondary" label="Users" icon="users" font="sans" size="md" right>
        <AisMenuItem label="Users"></AisMenuItem>
        <AisMenuItem label="Groups"></AisMenuItem>
        <AisMenuItem label="World"></AisMenuItem>
      </AisDropdown>
    </AisInputGroup>
  </AisField>
</template>

Checkbox

User Agreement

Terms of service

Sign and accept terms

<script setup>
  import {ref} from 'vue'
  import { AisField } from '@ais-public/ais-components'
  import { AisInputGroup } from '@ais-public/ais-components'
  import { AisAddon } from '@ais-public/ais-components'
  import { AisInput } from '@ais-public/ais-components'
  import { AisCheckbox } from '@ais-public/ais-components'

  let checked = ref(false)
</script>

<template>
  <AisField label="User Agreement" description="Sign and accept terms">
    <AisInputGroup class="">
      <AisAddon icon="file" />
      <AisInput placeholder="Your name..." size="md" class="w-72" />
      <AisAddon>
        <AisCheckbox v-model="checked">Terms of service</AisCheckbox>
      </AisAddon>
    </AisInputGroup>
  </AisField>
</template>

Radio

Forecast

Fahrenheit

Celsius

What will the temperature be tomorrow?

<script setup>
import {ref} from 'vue'
import { AisField } from '@ais-public/ais-components'
import { AisInputGroup } from '@ais-public/ais-components'
import { AisAddon } from '@ais-public/ais-components'
import { AisInput } from '@ais-public/ais-components'
import { AisRadioGroup } from '@ais-public/ais-components'

import { faTemperatureHigh } from '@fortawesome/free-solid-svg-icons'
import { library } from '@fortawesome/fontawesome-svg-core'

library.add(faTemperatureHigh)
let tempScale = ref('Fahrenheit')
</script>

<template>
  <AisField label="Forecast" description="What will the temperature be tomorrow?">
    <AisInputGroup class="rounded-sm">
      <AisAddon :icon="faTemperatureHigh" />
      <AisInput placeholder="Temperature..." size="md" class="w-36" />
      <AisAddon>
        <AisRadioGroup v-model="tempScale" :options="['Fahrenheit', 'Celsius']" gap="gap-5" />
      </AisAddon>
    </AisInputGroup>
  </AisField>
</template>

Compound Groups

It is possible to create interesting input groups with multiple elements, but developers should be wary of building complicated groups. AisInputGroup has no inherent responsiveness. A complicated group may need to be hidden and re-implemented as stacked controls on small screens. Always test your designs at a variety of screen sizes.

Accessibility

Select 1

Select...OneTwoThree

Select 2

Select...OneTwoThreeReally really long option

<script setup>
import {ref} from 'vue'
import { AisField } from '@ais-public/ais-components'
import { AisInputGroup } from '@ais-public/ais-components'
import { AisAddon } from '@ais-public/ais-components'
import { AisInput } from '@ais-public/ais-components'
import { AisSelect } from '@ais-public/ais-components'
import { AisButton } from '@ais-public/ais-components'
</script>

<template>
  <AisField label="Accessibility" label-mode="sr-only" >
    <AisInputGroup class="flex-1">
      <AisAddon icon="filter" class="px-4" />
      <AisInput placeholder="Testing..." size="sm" class="flex-auto grow-3" />
      <label for="select1" class="sr-only">Select 1</label>
      <AisSelect id="select1" size="sm"
                 :default-option="{ label: 'Select...', value: undefined, disabled: false}"
                 :options="['One', 'Two', 'Three']" class="grow"
      />
      <label for="select2" class="sr-only">Select 2</label>
      <AisSelect id="select2" size="sm"
                 :default-option="{ label: 'Select...', value: undefined, disabled: false}"
                 :options="['One', 'Two', 'Three', 'Really really long option']" class="grow"
      />
      <AisButton variant="secondary" size="sm" hover press>Do it!</AisButton>
    </AisInputGroup>
  </AisField>
</template>

Accessibility

When using input groups, you must make sure all form elements have a label. Wrapping a group in AisField will ensure the first form element has an associated label. You must explicitly create label tags for any additional form elements in the group. Use the class sr-only to only expose the labels to screen readers.

Accessibility

Select 1

Select...OneTwoThree

Select 2

Select...OneTwoThreeReally really long option

Field 2

Select...OneTwoThree

<script setup>
  import {ref} from 'vue'
  import { AisField } from '@ais-public/ais-components'
  import { AisInputGroup } from '@ais-public/ais-components'
  import { AisAddon } from '@ais-public/ais-components'
  import { AisInput } from '@ais-public/ais-components'
  import { AisSelect } from '@ais-public/ais-components'
</script>

<template>
  <div class="flex gap-4">
    <AisField label="Accessibility" label-mode="sr-only" >
      <AisInputGroup class="flex-1">
        <AisAddon icon="filter" class="px-4" />
        <AisInput placeholder="Testing..." size="sm" class="flex-auto grow-3" />
        <label for="select1" class="sr-only">Select 1</label>
        <AisSelect id="select1" size="sm"
                   :default-option="{ label: 'Select...', value: undefined, disabled: false}"
                   :options="['One', 'Two', 'Three']" class="w-36"
        />
        <label for="select2" class="sr-only">Select 2</label>
        <AisSelect id="select2" size="sm"
                   :default-option="{ label: 'Select...', value: undefined, disabled: false}"
                   :options="['One', 'Two', 'Three', 'Really really long option']" class="w-36"
        />
      </AisInputGroup>
    </AisField>

    <AisField label="Field 2" label-mode="sr-only">
      <AisSelect size="sm"
                 :default-option="{ label: 'Select...', value: undefined, disabled: false}"
                 :options="['One', 'Two', 'Three']" class="w-72"
      />
    </AisField>
  </div>
</template>