Fieldset: Use Cases

With Data

The fieldset's modelValue is an Object containing properties where the key is the name attribute of the field, and the value is the modelValue of the field.

export const data = () => html`
  <lion-fieldset name="nameGroup" label="Name">
    <lion-input name="firstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
    <lion-input name="lastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
    <button @click="${ev => console.log(ev.target.parentElement.modelValue)}">
      Log to Action Logger
    </button>
  </lion-fieldset>
`;

Disabled

Disabling a fieldset disables all its child fields. When enabling a fieldset, fields that have disabled explicitly set will stay disabled.

export const disabled = () => {
  function toggleDisabled(e) {
    const fieldset = e.target.parentElement.querySelector('#fieldset');
    fieldset.disabled = !fieldset.disabled;
  }
  return html`
    <lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
      <lion-input name="FirstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
      <lion-input name="LastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
      <lion-fieldset name="nameGroup2" label="Name">
        <lion-input
          name="FirstName2"
          label="First Name"
          .modelValue="${'Foo'}"
          disabled
        ></lion-input>
        <lion-input name="LastName2" label="Last Name" .modelValue="${'Bar'}"></lion-input>
      </lion-fieldset>
    </lion-fieldset>
    <button @click="${toggleDisabled}">Toggle disabled</button>
  `;
};

Nesting fieldsets

Fieldsets can also be nested. The level of nesting will correspond one to one with the modelValue object.

export const nestingFieldsets = () => html`
  <lion-fieldset>
    <div slot="label">Personal data</div>
    <lion-fieldset name="nameGroup" label="Name">
      <lion-input name="FirstName" label="First Name" .modelValue="${'Foo'}"></lion-input>
      <lion-input name="LastName" label="Last Name" .modelValue="${'Bar'}"></lion-input>
    </lion-fieldset>
    <lion-fieldset name="location" label="Location">
      <lion-input name="country" label="Country" .modelValue="${'Netherlands'}"></lion-input>
    </lion-fieldset>
    <lion-input name="age" label="Age" .modelValue="${21}"></lion-input>
    <button @click="${ev => console.log(ev.target.parentElement.modelValue)}">
      Log everything to Action Logger
    </button>
    <br />
    <button
      @click="${ev => console.log(ev.target.parentElement.formElements.nameGroup.modelValue)}"
    >
      Log only Name fieldset to Action Logger
    </button>
  </lion-fieldset>
`;

Validation

You can create validators that work on a fieldset level. Below, we mimic a required validator, but on the fieldset. Try it by typing something in the input, then removing it.

export const validation = () => {
  const DemoValidator = class extends Validator {
    static get validatorName() {
      return 'DemoValidator';
    }
    execute(value) {
      if (value && value.input1) {
        return false; // el.hasError = true
      }
      return true;
    }
    static async getMessage() {
      return '[Fieldset Error] Demo error message';
    }
  };
  return html`
    <lion-fieldset id="someId" .validators="${[new DemoValidator()]}">
      <lion-input name="input1" label="Label"></lion-input>
    </lion-fieldset>
  `;
};

Validating multiple inputs in a fieldset

You can have your fieldset validator take into consideration multiple fields.

export const validatingMultipleFields = () => {
  const IsCatsAndDogs = class extends Validator {
    static get validatorName() {
      return 'IsCatsAndDogs';
    }
    execute(value) {
      return !(value.input1 === 'cats' && value.input2 === 'dogs');
    }
    static async getMessage() {
      return '[Fieldset Error] Input 1 needs to be "cats" and Input 2 needs to be "dogs"';
    }
  };
  return html`
    <lion-fieldset .validators="${[new IsCatsAndDogs()]}">
      <lion-input label="An all time YouTube favorite" name="input1" help-text="cats"> </lion-input>
      <lion-input label="Another all time YouTube favorite" name="input2" help-text="dogs">
      </lion-input>
    </lion-fieldset>
  `;
};

Alternatively you can also let the fieldset validator be dependent on the error states of its child fields.

Simply loop over the formElements inside your Validator's execute method:

this.formElements.some(el => el.hasFeedbackFor.includes('error'));

Validating multiple fieldsets

You can have your fieldset validator take into accounts multiple nested fieldsets.

export const validatingMultipleFieldsets = () => {
  const IsCatsDogs = class extends Validator {
    static get validatorName() {
      return 'IsCatsAndDogs';
    }
    execute(value) {
      if (
        value.inner1 &&
        value.inner1.input1 === 'cats' &&
        value.inner2 &&
        value.inner2.input1 === 'dogs'
      ) {
        return false;
      }
      return true;
    }
    static async getMessage() {
      return 'There is a problem with one of your fieldsets';
    }
  };
  return html`
    <lion-fieldset name="outer" .validators="${[new IsCatsDogs()]}">
      <lion-fieldset name="inner1">
        <label slot="label">Fieldset no. 1</label>
        <lion-input label="Write 'cats' here" name="input1"> </lion-input>
      </lion-fieldset>
      <hr />
      <lion-fieldset name="inner2">
        <label slot="label">Fieldset no. 2</label>
        <lion-input label="Write 'dogs' here" name="input1"> </lion-input>
      </lion-fieldset>
    </lion-fieldset>
  `;
};

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!