Fieldset

The Fieldset component is used to group several form fields within a web form.

Legend

Use the legend prop or slot to create a <legend> to label multiple fields, or when using components like checkboxes and radios. Legends are required for fieldsets and will throw an error if the legend prop is absent.

Prop usage

<template>
  <ci-fieldset
    legend="Address"
    description="Please provide your address"
    required
  >
    <ci-input
      v-model="address.street"
      class="field"
      sublabel="Street"
      required
    />
    <ci-input
      v-model="address.street2"
      class="field"
      sublabel="Street 2"
    />
    <ci-input
      v-model="address.city"
      class="field"
      sublabel="City"
      required
    />
    <div class="flex">
      <ci-select
        v-model="address.state"
        :options="states"
        class="field"
        sublabel="State"
        required
      />
      <ci-input
        v-model="address.zip"
        class="field field--zip"
        sublabel="Zip"
        required
      />
    </div>
  </ci-fieldset>
</template>
<script>
export default {
  data() {
    return {
      address: {
        street: '',
        street2: '',
        city: '',
        state: '',
        zip: ''
      },
      states: [
        { value: 'ca', text: 'CA' },
        { value: 'ny', text: 'NY' },
        { value: 'wi', text: 'WI' }
      ]
    }
  }
}
</script>
<style>
.flex {
  display: flex;
}

.field {
  flex: 1;
  margin-bottom: 10px;
}

.field.field--zip {
  flex: 0 0 auto;
  width: 100px;
  margin-left: 10px;
}
</style>

Slot usage

<template>
  <ci-fieldset
    description="What is your preferred method of contact?"
    required
  >
    <template #legend>
      Preferred Communication
    </template>
    <ci-checkbox v-model="checkboxVal1">
      Phone
    </ci-checkbox>
    <ci-checkbox v-model="checkboxVal2">
      Email
    </ci-checkbox>
  </ci-fieldset>
</template>
<script>
export default {
  data() {
    return {
      checkboxVal1: false,
      checkboxVal2: false
    }
  }
}
</script>

#

Description

The description prop adds additional text below your legend and above your content. Descriptions are intended to provide more context and guidance to users.

Prop usage

<template>
  <ci-fieldset legend="Legend" description="Some description here" />
</template>

Slot usage

The description slot is deprecated and will be removed in the next major release. Please use the description prop instead.

<template>
  <ci-fieldset legend="Legend">
    <template #description>
      Some other description
    </template>
  </ci-fieldset>
</template>

#

Fullwidth

The fullwidth prop removes the max-width applied to the fieldset by default.

<template>
  <ci-fieldset
    legend="Legend"
    description="Some description here"
    fullwidth
  >
    <ci-input sublabel="Some input" fullwidth />
  </ci-fieldset>
</template>

#

Disabled

The disabled prop disables the fieldset and gives it a disabled appearance. It will also pass disabled to any FormField components used within automatically.

<template>
  <ci-fieldset
    legend="Legend"
    description="Some description here"
    disabled
  >
    <ci-input sublabel="Some input" />
  </ci-fieldset>
</template>

#

Errors

Use the error prop to add an error message below the fieldset and highlights the legend in red. You can pass in a string if you want to display a message.
An error message should clearly explain what went wrong and how to fix it. Use passive voice so people don’t feel like they’re being blamed for the error.

<template>
  <div>
    <ci-fieldset
      legend="Personal details"
      description="Tell us more about you"
      error
    >
      <ci-input class="field" sublabel="First name" error />
      <ci-input class="field" sublabel="Last name" />
    </ci-fieldset>
    <br/>
    <ci-fieldset
      legend="Personal details"
      description="Tell us more about you"
      error="Please provide a first name"
    >
      <ci-input class="field" sublabel="First name" error />
      <ci-input class="field" sublabel="Last name" />
    </ci-fieldset>
  </div>
</template>

error-message Prop and Slot

The error-message prop and slot are both deprecated and will be removed in the next major release. Please use the error prop instead.

Prop usage

<template>
  <ci-fieldset
    legend="Personal details"
    description="Tell us more about you"
    error-message="Please provide a first name"
  >
    <ci-input class="field" sublabel="First name" error />
  </ci-fieldset>
</template>

Slot usage

<template>
  <ci-fieldset
    legend="Personal details"
    description="Tell us more about you"
  >
    <template #error-message>
      Please provide a first name
    </template>
    <ci-input class="field" sublabel="First name" error />
  </ci-fieldset>
</template>

#

Success

Use the success prop to highlight the legend in green. You can pass in a string if you want to display a message. It will only render if there is no error message.

<template>
  <div>
    <ci-fieldset
      legend="Legend"
      description="No message"
      success
    >
      <ci-input sublabel="Some field" />
    </ci-fieldset>
    <br/>
    <ci-fieldset
      legend="Legend"
      description="Has message"
      success="Form submitted"
    >
      <ci-input sublabel="Some field" />
    </ci-fieldset>
    <br/>
    <ci-fieldset
      legend="Legend"
      description="Has message but also error"
      success="Form submitted"
      error
    >
      <ci-input sublabel="Some field" />
    </ci-fieldset>
  </div>
</template>

success-message Prop and Slot

The success-message prop and slot are both deprecated and will be removed in the next major release. Please use the success prop instead.

Prop usage

<template>
  <ci-fieldset
    legend="Legend"
    description="Some description"
    success-message="Form submitted"
  >
    <ci-input sublabel="Some field" />
  </ci-fieldset>
</template>

Slot usage

<template>
  <ci-fieldset
    legend="Legend"
    description="Some description"
  >
    <template #success-message>
      Form submitted
    </template>
    <ci-input sublabel="Some field" />
  </ci-fieldset>
</template>