AisFieldset

AisFieldset creates a <fieldset> element. The component exposes a legend for the fieldset and provides a control point for all of its children.

Props

legend

The legend prop will specify the content of the fieldset's legend if specified. The legend provides an accessible way to label a group of fields. Be aware that the legend's styling and placement may not match that of a typical child element.

Legend

Field 1

Field 2

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

const data = ref({
  field1: 'Hello',
  field2: 'World',
})
</script>

<template>
  <div class="grid gap-8">
    <AisFieldset
        class="grid grid-cols-2 gap-4 pt-2"
        legend="Legend"
        size="md"
    >
      <AisField label="Field 1">
        <AisInput v-model="data.field1"/>
      </AisField>
      <AisField label="Field 2">
        <AisInput v-model="data.field2"/>
      </AisField>
    </AisFieldset>
  </div>
</template>

Custom Legend

If you would like more control over the legend's styling, leave the prop undefined and include your own <legend> element as the first child of the fieldset.

Custom legend

Field 1

Field 2

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

const data = ref({
  field1: 'Hello',
  field2: 'World',
})
</script>

<template>
  <div class="grid gap-8">
    <AisFieldset
        class="grid grid-cols-2 gap-4 p-6 pt-2 border "
        size="md"
    >
      <legend class="px-2 text-2xl font-light italic">
        Custom legend
      </legend>
      <AisField label="Field 1">
        <AisInput v-model="data.field1"/>
      </AisField>
      <AisField label="Field 2">
        <AisInput v-model="data.field2"/>
      </AisField>
    </AisFieldset>
  </div>
</template>

Alternative Heading

Alternatively, one could use a heading element (e.g. h3) or div and use the aria-labelledby attribute on the fieldset to make the relationship available to screen readers.

Heading

Field 1

Field 2

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

const data = ref({
  field1: 'Hello',
  field2: 'World',
})
</script>

<template>
  <div class="grid gap-8">
    <AisFieldset
        aria-labelledby="fieldset-label"
        class="grid grid-cols-2 gap-4 my-0"
        size="md"
    >
      <div id="fieldset-label" class="col-span-2 text-2xl font-serif border-b">
        Heading
      </div>
      <AisField label="Field 1">
        <AisInput v-model="data.field1"/>
      </AisField>
      <AisField label="Field 2">
        <AisInput v-model="data.field2"/>
      </AisField>
    </AisFieldset>
  </div>
</template>

size

The size prop sets the size of controls within the fieldset. The fieldset itself will also get a size class as a styling hook.

Fieldset size...

Fieldset Size

sm

md

lg

Field 1

Field 2

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

const data = ref({
  field1: 'Hello',
  field2: 'World',
})

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

<template>
  <div class="grid gap-8">
    <AisFieldset
        legend="Fieldset size..."
        class="grid grid-cols-2 gap-4 pt-2"
        :size="selectedSize"
    >
      <AisField label="Fieldset Size" label-mode="sr-only" class="col-span-2">
        <AisRadioGroup v-model="selectedSize" :options="sizes" />
      </AisField>
      <AisField label="Field 1">
        <AisInput v-model="data.field1"/>
      </AisField>
      <AisField label="Field 2">
        <AisInput v-model="data.field2"/>
      </AisField>
    </AisFieldset>
  </div>
</template>

disabled

The disabled prop will disable all controls in the fieldset.

Fieldset

Field 1

Field 2

Disable fieldset

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

const data = ref({
  field1: 'Hello',
  field2: 'World',
})

const isDisabled = ref(false)
</script>

<template>
  <div class="grid gap-6">
    <AisFieldset
        legend="Fieldset"
        class="grid grid-cols-2 gap-4 pt-2"
        size="md"
        :disabled="isDisabled"
    >
      <AisField label="Field 1">
        <AisInput v-model="data.field1"/>
      </AisField>
      <AisField label="Field 2">
        <AisInput v-model="data.field2"/>
      </AisField>
    </AisFieldset>

    <AisCheckbox v-model="isDisabled" class="border-t pt-2">Disable fieldset</AisCheckbox>
  </div>
</template>

rounded

The rounded prop will provide a rounded setting for child elements. Use rounded to limit page configuration. It applies to text fields, textareas, selects, and buttons. Please report elements that do not respond as expected. Note that AisFieldset will also inherit rounded settings from parents like AisForm when they are provided. The fieldset's prop will take priority over a provided value as shown in the following example.

Form Rounding

none

sm

md

full

Fieldset Rounding

none

sm

md

full

Field 1

Field 2

Fieldset

Field 3

Field 4

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

const data = ref({
  field1: 'Hello',
  field2: 'World',
  field3: 'Foo',
  field4: 'Bar',
})

const sizes = ['none', 'sm', 'md', 'full']
const formRounding = ref('md')
const fieldsetRounding = ref('full')
</script>

<template>
  <div class="grid gap-8">
    <AisForm
        class="grid grid-cols-2 gap-4 pt-2"
        :rounded="formRounding"
    >
      <AisField label="Form Rounding" class="">
        <AisRadioGroup v-model="formRounding" :options="sizes" />
      </AisField>

      <AisField label="Fieldset Rounding" class="">
        <AisRadioGroup v-model="fieldsetRounding" :options="sizes" />
      </AisField>

      <AisField label="Field 1">
        <AisInput v-model="data.field1"/>
      </AisField>
      <AisField label="Field 2">
        <AisInput v-model="data.field2"/>
      </AisField>

      <AisFieldset class="col-span-2 grid grid-cols-2 gap-y-1 gap-x-4"
        :rounded="fieldsetRounding"
      >
        <div class="col-span-2 text-xl italic font-medium">
          Fieldset
        </div>
        <AisField label="Field 3">
          <AisInput v-model="data.field3"/>
        </AisField>
        <AisField label="Field 4">
          <AisInput v-model="data.field4"/>
        </AisField>
      </AisFieldset>
    </AisForm>
  </div>
</template>