AisField

AisField provides the structure around a form field. This includes the label, required marker, description, and error list.

Props

id

id specifies the enclosed input's unique id. By default, an id will be generated from the label attribute. For example, if the label is 'First Name', the field will generate an id of the form first-name-34f9. The value will be injected such that child components have access to it. Inspect the example below to see the id is set on the text input.

label

The label prop defines the field label, which is required for accessibility even if it is not visible on the screen.

Field Label

<template>
  <AisField label="Field Label">
    <AisInput placeholder="Example with label" />
  </AisField>
</template>

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

labelMode

labelMode controls the display of the field's label. Valid options are:

• normal - Visible to users and screen readers (default option).
• transparent - Visible to screen readers - holds space on the page.
• sr-only - Visible only to screen readers - does not occupy space on the page.

sr-only is useful for inline forms where no visible labels are used. transparent is useful when a field without a visible label is displayed alongside fields with labels. If you toggle between normal and transparent, you can see the form input doesn't change position.

Label Mode

normal

transparent

sr-only

Field Label

<template>
  <div class="grid gap-4">
    <AisField label="Label Mode" id="label-mode-select">
      <AisRadioGroup
          :options="['normal', 'transparent', 'sr-only']"
          v-model="mode"
      />
    </AisField>
    <AisField
      id="ex2"
      label="Field Label"
      :labelMode="mode"
    >
      <AisInput placeholder="Example with labelMode" />
    </AisField>
  </div>
</template>

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

const mode = ref('normal')
</script>

required

Indicates the field is required. Visually indicated by an asterisk. When the user hovers over the label, a tooltip will be revealed labelling the field as required. Enclosed input will pick up the required designation.

Required Label

<template>
  <AisField required label="Required Label">
    <AisInput placeholder="Required field" />
  </AisField>
</template>

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

size

Set the field size -- expected values are sm, md, lg. Field size can impact the size of the field's label and is provided to field's children.

Field Size

sm

md

lg

xl

Field 1

• Something wrong

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

const field1 = ref('Hello World')
const sizes = ['sm', 'md', 'lg', 'xl']
const selectedSize = ref('md')
</script>

<template>
  <div class="grid gap-4">
      <AisField label="Field Size">
        <AisRadioGroup v-model="selectedSize" :options="sizes" />
      </AisField>
      <AisField :size="selectedSize" label="Field 1" :errors="['Something wrong']">
        <AisInput v-model="field1"/>
      </AisField>
  </div>
</template>

description

Set a brief description that appears below the form field. Description will be hidden if errors are present.

Field Label

Username must be between 8 and 20 characters

<template>
  <AisField
    label="Field Label"
    description="Username must be between 8 and 20 characters"
  >
    <AisInput placeholder="Description appears below..." />
  </AisField>
</template>

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

errors

The errors prop will accept one or more strings or error objects. When passed objects, the errorMessage prop will be used to resolve the error message. If errors are present, the field's description will be hidden, and the error messages will display in red under the input element.

Single error string

• Specify address in pig latin

Error array

• Do not wear white after Labor Day
• Tacos only available on Tuesday

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

<template>
  <div class="grid gap-8">
    <AisField
        label="Single error string"
        description="Username must be between 8 and 20 characters"
        errors="Specify address in pig latin"
    >
      <AisInput placeholder="Description appears below..."/>
    </AisField>

    <AisField
        label="Error array"
        description="Username must be between 8 and 20 characters"
        :errors="[
          'Do not wear white after Labor Day',
          'Tacos only available on Tuesday'
        ]"
    >
      <AisInput placeholder="Description appears below..."/>
    </AisField>
  </div>
</template>

errorMessage

When an error object or objects are passed to errors, errorMessage is used to convert the object into a display string. If errorMessage is a string, it represents a field in the object and the value of that field is used as the message. If errorMessage is a function, the error object is passed to the function and the return value is used as the message.

There is no default value for errorMessage. If no value is specified, the field will look for message, $message, and msg fields in the error object.

Error object - Specific message field

• Submit form in triplicate

Error object - Default message field

• Where is the carbon paper?

Error objects array - Message function

• Burn after reading
• ROT13 is not secure

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

<template>
  <div class="grid gap-8">
    <AisField
        label="Error object - Specific message field"
        description="Username must be between 8 and 20 characters"
        :errors="{display: 'Submit form in triplicate'}"
        error-message="display"
    >
      <AisInput placeholder="Specific message field"/>
    </AisField>

    <AisField
        label="Error object - Default message field"
        description="Username must be between 8 and 20 characters"
        :errors="{message: 'Where is the carbon paper?'}"
    >
      <!-- Note: errorMessage prop is not present above -->
      <AisInput placeholder="Default message field"/>
    </AisField>

    <AisField
        label="Error objects array - Message function"
        description="Username must be between 8 and 20 characters"
        :errors="[
          { display: 'Burn after reading' },
          { display: 'ROT13 is not secure' }
        ]"
        :errorMessage="(error) => error.display"
    >
      <AisInput placeholder="Message function"/>
    </AisField>
  </div>
</template>

disabled

disabled is a boolean prop that will disable its enclosed form element and visually de-emphasize the field's display.

Disabled Label

This is a disabled field.

<template>
  <AisField disabled
    label="Disabled Label"
    description="This is a disabled field."
  >
    <AisInput placeholder="Placeholder" />
  </AisField>
</template>

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

Slots

AisField exposes four slots. The default slot is used all the time to specify the field's form input. The other slots can be used to override the label, description, and error presentation. It is not expected that these slots will be used very often.

default

The default slot typically accepts the form field definition and related content. The label and required props are passed to the slot. AisField will also inject some of its data to make it available to its descendents. The AIS form components know to look for this data and apply it to their own templates.

label

The label slot can be used to override the construction and presentation of the field's label. The label and required props are passed to the slot.

description

The description slot can be used to override the construction and presentation of the field's description. The description prop is passed to the slot.

errors

The errors slot can be used to override the construction and presentation of the field's errors. The errors prop is passed to the slot.

Field test

Explore AisField's interaction with different input types by exercising the example below.

Form Controls

Description

Error

Required

Disabled

Text input

Sic transit gloria mundi

Select

Option 1Option 2Option 3

Sic transit gloria mundi

Checkbox Group

Option 1

Option 2

Option 3

Sic transit gloria mundi

Radio Group

Option 1

Option 2

Option 3

Sic transit gloria mundi

Textarea

Sic transit gloria mundi

<template>
  <div class="grid grid-cols-1 gap-8">
    <AisField class="col-span-1" label="Form Controls">
      <div class="grid gap-4 border rounded p-4 bg-ui-gray-50">
        <AisField label="Description">
          <AisInput size="sm" v-model="description" class="flex-grow" />
        </AisField>
        <AisField label="Error">
          <AisInput size="sm" v-model="errorMessage" class="flex-grow" />
        </AisField>
        <div class="flex gap-4">
          <AisCheckbox v-model="isRequired">Required</AisCheckbox>
          <AisCheckbox v-model="isDisabled">Disabled</AisCheckbox>
        </div>
      </div>
    </AisField>

    <AisField label="Text input"
              :description="description"
              :required="isRequired"
              :disabled="isDisabled"
              :errors="errorMessage"
    >
      <AisInput v-model="textInput" />
    </AisField>

    <AisField label="Select"
              :description="description"
              :required="isRequired"
              :disabled="isDisabled"
              :errors="errorMessage"
    >
      <AisSelect :options="options" v-model="select" />
    </AisField>

    <AisField label="Checkbox Group"
              :description="description"
              :required="isRequired"
              :disabled="isDisabled"
              :errors="errorMessage"
    >
      <AisCheckboxGroup :options="options" v-model="checkboxes" />
    </AisField>

    <AisField label="Radio Group"
              :description="description"
              :required="isRequired"
              :disabled="isDisabled"
              :errors="errorMessage"
    >
      <AisRadioGroup :options="options" v-model="radios" />
    </AisField>

    <AisField class="col-span-1" label="Textarea"
              :description="description"
              :required="isRequired"
              :disabled="isDisabled"
              :errors="errorMessage"
    >
      <AisTextarea v-model="textarea" />
    </AisField>
  </div>

</template>

<script setup>
import { ref } from 'vue'
import { AisField } from '@ais-public/ais-components'
import { AisInput } from '@ais-public/ais-components'
import { AisSelect } from '@ais-public/ais-components'
import { AisCheckbox } from '@ais-public/ais-components'
import { AisCheckboxGroup } from '@ais-public/ais-components'
import { AisRadioGroup } from '@ais-public/ais-components'
import { AisTextarea } from '@ais-public/ais-components'

const isRequired = ref(false)
const isDisabled = ref(false)
const description = ref("Sic transit gloria mundi")
const errorMessage = ref("")

const options = ref(['Option 1', 'Option 2', 'Option 3'])

const textInput = ref('')
const select = ref('')
const checkboxes = ref([])
const radios = ref('Option 1')
const textarea = ref('')
</script>